Duplicate JS when sending record

Question

I have an application with bootstrap modal, but when sending the data with the button it duplicates the event, follow the js with duplication.

$(document).on('click', '.form-delete', function(e){
    e.preventDefault();
    var $form=$(this);
    $('#title_delete').val($(this).data('title'));
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
        .on('click', '#delete-btn', function(){
            alert($form);
        });
});

The operation is as follows, if close the modal and open again, when clicking the delete button and send the data it sends the data of the previous and the current modal.

Follow the test link https://jsfiddle.net/308s2ftk/3/

Answer 1

Separate events and declare a global variable to popular form:

var $form;

$(document).on('click', '.form-delete', function(e){
    e.preventDefault();
    $form = $(this);
    $('#title_delete').val($(this).data('title'));
    $('#confirm').modal({ backdrop: 'static', keyboard: false });
});

$(document).on('click', '#delete-btn', function(){
    alert($form);
});

What happens is that in your code every time you click . form-delete you attach a new click event to #delete-btn. That’s why it’s generating a progressive increase in Alerts.

Your fiddle updated: https://jsfiddle.net/308s2ftk/9/