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

Question

我有一个 div，我在其中放置了带有提交按钮的文本区域。我需要将文本区域放在每个帖子下，让用户发表评论。

这是我的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)));