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

Question

我有一个div，我把textarea放在提交按钮上。 我需要将textarea放在每个帖子下面，让用户发表评论。

这是我的textarea的形状

<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>

当我得到div textarea_wrap的innerHtml并使用Jquery将其移动到其他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移动后无法正常工作。

Answer 1

鉴于已克隆的表单具有与以前相同的名称，当您尝试提交表单时，这会在DOM中创建错误。

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

解决方案（jQuery的）：

从

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

至

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

Answer 2

虽然不确定..检查你是否可以像这样提交

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

Answer 3

两个表单都具有相同的名称“post_comment”。 表格名称应该是唯一的。

Answer 4

这可能是也可能不是问题的一部分，但您在提交按钮定义中有语法错误。 请记住关闭值属性值=“提交注释”的引用