CODEWITHSUNDEEP
javascriptajaxjquery
Lughino
Lughino

Reputation: 4118

One click generates multiple ajax calls

A strange phenomenon is happening to me ..

I have a list of items where alongside each have the delete button to delete that article, here is an example: http://jsfiddle.net/lughino/8HYeQ/5/

$('.delete').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).parents('li'),
        $url = $(this).attr('href');
    $('#delete_confirm').modal('show');
    $('#delete_confirm').find('button.btn-danger').click(function() {
        $.post($url, function(result) {
            $('#delete_confirm').modal('hide');
            $li.remove();
        });
    });
});

Unfortunately this sample are not able to reproduce the problem!

When I delete the first article with id 1, performs an ajax call.

When I delete the second product, with id 2, 2 runs ajax calls, one for Article 1, which is successful because of course has already been deleted, and one for the second article.

If I delete something else as he performs 3 ajax calls, and so on ..

is maintained in memory as if the old id ... you can solve this strange behavior?

From what is due?

Upvotes: 2

Views: 1589

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

It is because you are registering the confirm callback handler inside the delete button click handler. So when you click on the delete button first time the handler is registered once - so the ajax request is sent once. When you click on the delete button second time one more confirm handler is registered, now we have two confirm handlers registered.

it should be

$('.delete').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).parents('li'),
        $url = $(this).attr('href');
    $('#delete_confirm').modal('show');
});

$('#delete_confirm').find('button.btn-danger').click(function() {
    $.post($url, function(result) {
        $('#delete_confirm').modal('hide');
        $li.remove();
    });
});

Upvotes: 3

Related Questions