2

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

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

我通过 action 属性在 html(response) 页面上的表单

<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(response) 显示在原始页面上。然后，当我尝试提交新评论时，我会被重定向到操作页面。我通过将“提交”更改为“按钮”来阻止它，但这并没有给我想要的结果——即能够再次提交表单。

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

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

4

1 回答 1

5

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

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

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

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

    //your ajax call

});

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

于 2012-08-21T10:57:32.270 回答