我有一个 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 移动后它不起作用。
最佳答案
鉴于已克隆的表单与之前的名称相同,当您尝试提交表单时,这会在 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)));
关于javascript - 使用 Jquery 移动 div 后表单提交不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16088903/