ajax : number of ajax request increases on each click

Question

I read question below and solved my 'increasing number of ajax requests' problem by just adding unbind('click') to proper position.

ajax increases number of responses with each click

When I directly bound ajax request to click event, it seemed like everytime I click the button the number of function bound increased, and that had to be the problem.

When I see loaded pages in Network status in chrome dev tool, it surely increased like:

1st click :
deleteRecord

2nd click :
deleteRecord
deleteRecord

3rd click :
deleteRecord
deleteRecord
deleteRecord

4th click :
deleteRecord
deleteRecord
deleteRecord
deleteRecord

and so on...

So I add unbind('click') after ajax request and now it works correctly.(no increasing) But in another simillar function, there is no increasing problem even though I didn't add unbind('click'). Why this difference occurs?

Here's my codes:

$('.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');
            }
        });
    });
});

First one doesn't make the number of ajax request increased even without unbind('click'), but second one makes it increased without unbind('click').

I think both are binding ajax to click directly but there surely is difference. Why this difference occurs? Thanks in advance.

You're setting a click event listener inside another click event listener, so every time you click the outer button another click listener is attached to the inner button. — ibrahim mahrir, Mar 01 '17 at 15:42
Read your code: `$('.popup.delete .yes').click(function() {});` You are binding an extra click handler to the .popup.delete every time the .container-fluid is clicked. — Shilly, Mar 01 '17 at 15:42

ibrahim mahrir · Answer 1 · 2017-03-01T15:46:55.607

As a solution to what I said in the comments above, try this:

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

Don't forget to remove the unbind in the ajax success callback. :) — Shilly, Mar 01 '17 at 15:46

score 0 · Answer 2 · answered Mar 01 '17 at 15:44

I think the difference is that in the second function you're binding to the click the action of binding the ajax call to the confirmation.

In this way, the first time you click on the item you bind the ajax call to the confirmation, and the second time you bind another ajax call to the confirmation, so when the user confirms it fires the call twice.

ajax : number of ajax request increases on each click

2 Answers2