jQuery Ajax发送两次第二次提交,三次提交第三次

时间:2016-01-11 20:44:19

标签: javascript php jquery html ajax

我正在尝试为我的博客网站创建一个评论系统。这里的用户可以发一个问题,其他人可以回复它。用户也可以对每个回复发表评论,如堆栈溢出。问题是在第一次评论后,第二条评论得到提交两次,第三次评论提交三次等等。我如何解决这个问题?谢谢:))

hrer var comment,textarea和cmntholder都是元素集合

var comment=$('.cmnt');
var textarea=$('.answerComment');
var cmntholder=$('.cmntholder')
for(i=0;i<comment.length;i++){
    (function(i){
        $(comment[i]).click(function(e){
            e.preventDefault();
            $(comment[i]).hide();
            $(textarea[i]).show();
            $(textarea[i]).keypress(function(e){
                if(e.which=='13'){
                    $.ajax('../includes/verifycomment.php',{
                        data   :{
                            'comment_body'     :$(this).val(),
                            'userpost_post_id' : <?php echo $postid;?>,
                            'users_user_id'    : <?php echo $userdata->user_id; ?>,
                            'answers_answer_id':$(this).data('id')
                        },
                        datatype:'json',
                        method  :'POST',
                        success :function(response){
                              $(textarea[i]).html('');
                              $(textarea[i]).hide();
                              var obj=$.parseJSON(response);
                             alert('bal');
                              var str="<div class='stylecomment' >"+obj[0]['comment_body']+" --- <span style='color:#d3d3d3;font-size:13px;'>   commented by </span><a href='../includes/profile.php?user=<?php echo escape($userdata->username);?>'><?php echo escape($userdata->username);?></a> </div></div>";
                              $(cmntholder[i]).append(str);
                              $(comment[i]).show();
                        }

                    });
                }
            });
            $(this).hide();
        });
    })(i);
}

这是问题:

enter image description here

2 个答案:

答案 0 :(得分:1)

之所以这样,是因为每次点击事件触发时,您都会将按键功能重新绑定到DOM元素。这并不是每次都取代当前的keypress事件监听器,它只是添加一个新的。因此,第一次单击它执行一次,第二次,两次等。您可以在每次触发click事件时删除事件侦听器,就在将新的keypress侦听器绑定到textarea [i]之前确保每次只能触发一个事件。 http://api.jquery.com/unbind/

$(textarea[i]).unbind("keypress");
$(textarea[i]).keypress(function (e) {...});

每当您在事件侦听器中定义事件侦听器时,就会发生这种情况,只有FYI。

答案 1 :(得分:0)

问题肯定在于“i”计数器。似乎没有必要仔细阅读每条评论,因为唯一可以提交的评论是最新评论,这就是为什么它多次提交最新评论的原因。