javascript - jQuery Ajax 在第二次提交时发送两次，在第三次提交时发送三次

Question

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

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);
}

问题是这样的:

Answer 1

这是因为每次点击事件触发时，您都会将按键函数重新绑定(bind)到 DOM 元素。这不会每次都替换当前的按键事件监听器，它只是添加一个新的事件监听器。因此，第一次单击它执行一次，第二次执行两次，等等。您可以在每次触发单击事件时删除事件监听器，就在将新的按键监听器绑定(bind)到 textarea[i] 之前，以确保每次只能触发一个事件。 http://api.jquery.com/unbind/

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

只要您在事件监听器内定义事件监听器，就会发生这种情况，仅供引用。