Question

我在下面阅读了问题并解决了我越来越多的ajax请求问题。只需将unbind（＆＃39; click＆＃39;）添加到正确的位置即可解决问题。

ajax increases number of responses with each click

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

当我在chrome dev工具中看到网络状态下加载的页面时，肯定会增加如下：

第一次点击：
deleteRecord

第二次点击：
deleteRecord
deleteRecord

第3次点击：
deleteRecord
deleteRecord
deleteRecord

第4次点击：
deleteRecord
deleteRecord
deleteRecord
deleteRecord

等等...

所以我在ajax请求之后添加unbind（＆＃39; click＆＃39;）并且现在它正常工作。（没有增加）但是在另一个simillar函数中，即使我没有添加unbind也没有增加的问题（＆＃39;单击＆＃39;）。为什么会出现这种差异？

这是我的代码：

$('.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请求的数量（＆＃39;点击＆＃39;），但是第二个使得它增加而不解除绑定（＆＃39;点击＆＃39;）。

我认为两者都是绑定ajax直接点击但肯定有区别。为何会出现这种差异？提前谢谢。

Answer 1

作为我在上述评论中所说的解决方案，试试这个：

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

Answer 2

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

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

ajax：每次点击都会增加ajax请求的数量

2 个答案: