Javascript ajax：每次单击时ajax请求的数量都会增加

我阅读了下面的问题，只需将取消绑定（“单击”）添加到适当的位置，就解决了“ajax请求数量增加”的问题。

当我直接将ajax请求绑定到click事件时，似乎每次单击按钮时绑定的函数数量都会增加，这就是问题所在。

当我在chrome开发工具中看到网络状态下加载的页面时，它肯定会像：

第一次单击：
删除记录

第二次单击：
删除记录
删除记录

第三次单击：
删除记录
删除记录
删除记录

第四次单击：
删除记录
删除记录
删除记录
删除记录

等等…

所以我在ajax请求之后添加了unbind（'click'），现在它可以正常工作了。（没有增加），但是在另一个类似的函数中，即使我没有添加unbind（'click'），也没有增加问题。为什么会出现这种差异？

这是我的代码：

$('.card-button.glyphicon-pencil, .card-button.glyphicon-floppy-disk').click(function() {
    var classNames = this.className.split(' ');
    if(classNames[0] === 'record-0') return false;

    var inputs = $('.card.' + classNames[0] + ' input');
    if(classNames[3] === 'glyphicon-pencil') {
        inputs.attr('readonly', false);
        $(inputs[2]).datepicker({ dateFormat: 'yy-mm-dd (D)', dayNamesShort: ['일', '월', '화', '수', '목', '금', '토']});
        $(inputs[3]).datepicker({ dateFormat: 'yy-mm-dd (D)', dayNamesShort: ['일', '월', '화', '수', '목', '금', '토']});
        $(inputs[2]).datepicker('enable');
        $(inputs[3]).datepicker('enable');
    } else if(classNames[3] === 'glyphicon-floppy-disk') {
        $.ajax({
            type: "POST",
            url: "check/updateRecord",
            data: {"record_srl": classNames[0].split('-')[1], "area": $(inputs[0]).val(), "servant": $(inputs[1]).val(), "visit_start": $(inputs[2]).val(), "visit_end": $(inputs[3]).val(), "memo": $(inputs[4]).val()},
            dataType: "json",
            success:
            function(data) {
                inputs.attr('readonly', true);
                popup('update.ok');
            }
        });
    }
    inputs[0].focus();
    $(this).toggleClass('glyphicon-pencil glyphicon-floppy-disk')
});


$('.container-fluid .card-button.glyphicon-trash').click(function() {
    var record_srl = this.className.split(' ')[0].split('-')[1];
    popup('delete.confirm');
    $('.popup.delete .yes').click(function() {
        $.ajax({
            type: "POST",
            url: "check/deleteRecord",
            data: {"record_srl": record_srl},
            dataType: "json",
            success:
            function(data) {
                if(record_srl > 0)
                    $('div.card.record-' + record_srl).remove();

                popup('delete.ok');
                $('.popup.delete .yes').unbind('click');
            }
        });
    });
});

---

第一种方法即使没有取消绑定（“单击”）也不会增加ajax请求的数量，但是第二种方法在没有取消绑定（“单击”）的情况下也会增加ajax请求的数量。

我认为这两种方法都是将ajax绑定为直接单击，但肯定有区别。为什么会出现这种差异？提前感谢。

我认为区别在于，在第二个函数中，您绑定到的是单击将ajax调用绑定到确认的操作

---

这样，第一次单击项目时，您将ajax调用绑定到确认，第二次将另一个ajax调用绑定到确认，因此当用户确认时，它将触发两次调用。

为了解决我在上面的评论中所说的问题，请尝试以下方法：

var record_srl; // outside both function so it can be accessible to both

$('.container-fluid .card-button.glyphicon-trash').click(function() {
    // must not use var so the outer record_srl will be assigned to
    record_srl = this.className.split(' ')[0].split('-')[1];
    popup('delete.confirm');
});

$('.popup.delete .yes').click(function() {
    $.ajax({
        type: "POST",
        url: "check/deleteRecord",
        data: {"record_srl": record_srl},
        dataType: "json",
        success:
        function(data) {
            if(record_srl > 0)
                $('div.card.record-' + record_srl).remove();

            popup('delete.ok');
            // unbined removed
        }
    });
});

---

您正在另一个单击事件侦听器中设置一个单击事件侦听器，因此每次单击外部按钮时，另一个单击侦听器将附加到内部按钮。请阅读您的代码：

$（'.popup.delete.yes'）。单击（function（）{}）每次单击.container流体时，您都会将一个额外的单击处理程序绑定到.popup.delete。非常感谢，我是个白痴。。。必须更改它不要忘记删除ajax成功回调中的取消绑定。：）我情不自禁地爱你，非常感谢！很好用！