表单提交后，Jquery 函数第二次无法工作

Question

我正在通过 jqery 函数提交一个表单，该函数是使用 php 和 while 循环动态创建的。表单第一次正确提交，我生成 html 并使用 .html(response) 显示它。我复制了代码，以便该函数能够再次工作，但事实并非如此。当我第二次提交表单(没有页面刷新)时，表单将我发送到操作属性。

这是 jquery 的限制吗？

我的代码:

<script type="text/javascript">
$(document).ready(function() {

$("#submit<? echo"$counter$counter";?>").click(function() {

var action = $("#commentform<? echo "$counter$counter";?>").attr('action');
var form_data = {
comment: $("#comment<? echo "$counter$counter";?>").val(),
type: $("#commenttype<? echo "$counter$counter";?>").val(),
typeid: $("#commenttypeid<? echo "$counter$counter";?>").val(),
counter: $("#commentcounter<? echo "$counter$counter";?>").val(),
is_ajax: 1
};

$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
$("#commentarea<? echo"$counter$counter";?>").html(response);
}
});
return false;
});
});
</script>

我的表单与我正在运行的脚本位于同一页面:

<div class="postcommentscomment" style="size:10px; font-family:Verdana, Geneva, sans-serif;">
<form action="php/comment.php" id="commentform<? echo "$counter$counter";?>" method="post" name="comment" target="_self">
<textarea id="comment<? echo "$counter$counter";?>" style="width:162px; height:24px; color:#827e78; font-size:10px;">comment here</textarea>
<div style="float:right; position:relative; margin-top:5px;">
<input id="commenttype<? echo "$counter$counter";?>" type="hidden" value="<? echo $type;?>" />
<input id="commenttypeid<? echo "$counter$counter";?>" type="hidden" value="<? echo $id;?>" />
<input id="commentcounter<? echo "$counter$counter";?>" type="hidden" value="<? echo "$counter$counter";?>" />
<input id="submit<? echo"$counter$counter";?>" type="button" value="comment"/>
</div>
</form>
</div>

我的表单通过操作属性在 html(响应)页面上

<div class="postcommentscomment" style="size:10px; font-family:Verdana, Geneva, sans-serif;">
<form action="php/comment.php" id="commentform<? echo "$counter";?>" method="post" name="comment" target="_self">
<textarea id="comment<? echo "$counter";?>" style="width:162px; height:24px; color:#827e78; font-size:10px;">comment here</textarea>
<div style="float:right; position:relative; margin-top:5px;">
<input id="commenttype<? echo "$counter";?>" type="hidden" value="<? echo $type;?>" />
<input id="commenttypeid<? echo "$counter";?>" type="hidden" value="<? echo $id;?>" />
<input id="commentcounter<? echo "$counter";?>" type="hidden" value="<? echo "$counter";?>" />
<input id="submit<? echo"$counter";?>" type="button" value="comment"/>
</div>
</form>
</div>

注意:设置 counter php 变量，以便 html(response) 页面上的 $counter 产生与原始页面上的 $counter$counter 相同的结果。

因此，我提交评论，评论被插入数据库，然后运行查询，复制表单并通过 html(响应)显示在原始页面上。当我尝试提交新评论时，我会被重定向到操作页面。我通过将“提交”更改为“按钮”来停止这种情况，但这并没有给我想要的结果——即能够再次提交表单。

不确定这是 jquery 限制还是我的代码问题。

此外，评论所在的页面可能有不同的帖子。所以有多种评论形式。如果有更好的方法来执行 ajax 刷新特定帖子的评论，我愿意更改代码。

Answer 1

您的代码在文档就绪时执行，如果您第二次插入该代码，文档就绪将不会再次触发。

您可以将函数附加到表单的提交处理程序...

$('.postcommentscomment form').submit(function() {

    var form_data = $(this).serialize();

    //your ajax call

});

每次插入表单时，您都应该能够执行这段代码，与通过 id 获取所有输入值相比，序列化函数是一个更简单的选项，并且可以让您避免所有那些愚蠢的内联 php 计数器回显。