使用Jquery移动div后，表单提交不起作用。

Question

我有一个div，里面放了一个带有提交按钮的文本域。我需要把这个文本域放在每篇文章下面，以便让用户发表评论。

以下是我的文本域的样式：

<div id="textarea_wrap">
   <div id="textarea_12" class="txtarea">
   <form name="post_comment" action="reply.php" method="post"> 
   <input type="hidden" name="post_title" value="Post Title" />
   <input type="hidden" name="post_id" value="12455" />
   <textarea class="textarea" id="txt_12"></textarea>
   <input type="submit" class="button" value="Submit Comment />
   </form>
   </div>
</div>

当我使用Jquery获取div textarea_wrap的innerHTML，并将其移动到其他div时，它会停止工作。

例如：

  var txtarea = $("#textarea_wrap").html();
  $("#comment_10").html(txtarea);

它成功地将“textarea_wrap” div的内部HTML移动到“＃comment_10 div”，当我使用jQuery移动div后查看源代码时，它看起来像这样。

<div id="comment_10">
   <div id="textarea_12" class="txtarea">
   <form name="post_comment" action="reply.php" method="post"> 
   <input type="hidden" name="post_title" value="Post Title" />
   <input type="hidden" name="post_id" value="12455" />
   <textarea class="textarea" id="txt_12"></textarea>
   <input type="submit" class="button" value="Submit Comment />
   </form>
   </div>
</div>

但是当我点击“提交评论”按钮时，它不起作用。如果我在不使用jQuery的情况下使用此代码，则可以正常工作。不明白为什么通过jQuery移动后它不能工作。

- Rashid Farooq

---

你是否使用任何JavaScript/jQuery来提交你的表单？ - bipen

Answer 1

考虑到克隆的表单与之前的名称相同，当您尝试提交该表单时，这会在DOM中创建一个错误。

建议：每次克隆表单时更改表单名称。

解决方法(jQuery)：

修改前

var txtarea = $("#textarea_wrap").html();
$("#comment_10").html(txtarea);

To

var txtarea = $("#textarea_wrap").html();
$("#comment_10").html(txtarea).find('form').attr('name','post_comment'+(Math.floor(Math.random()*10000)));

- Mysteryos

Answer 2

不确定...请检查是否可以这样提交

$('.button').live('click',function({
    $('#give your form Id').submit();
});

- ntstha

Answer 3

这两个表单的名称都是“post_comment”。表单名称应该是唯一的。

- Vivek Sadh

Answer 4

这可能是问题的一部分，但您在提交按钮定义中有语法错误。请记得关闭value属性的引号value="提交评论"

- cosmixtew