Click event handler occurs multiple times after launching Bootstrap Modal using jQuery and Ajax

Question

I have designed a simple modal that works similarly as the JavaScript confirm when the user tries to delete any entity. When user clicks on the 'delete' icon, on the click event of the icon the following modal is launched.

If the user click 'Yes', an ajax request is sent to delete the item. It works perfectly when the first ajax request is sent. But when the user tries to perform the same operation again it sends two requests and so on for the next attempts. I can not figure out what is going wrong.

Here is my HTML for the 'delete icon':

<a href="javascript:void(0)" class="btn btn-default">
<?php echo $item_name . " "; ?>
<i class="fa fa-times delete_item" data-url="<?php echo $url; ?>" data-item_id="<?php echo $item['id']; ?>" ></i></a>

for the modal:

<div class="modal fade">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-body">
            <h5 style="text-align:center;">Do you want to delete this item?</h5>
            <br />
            <div>
                <button type="button" class="btn btn-danger pull-right confirm_delete">Yes</button>
                <button type="button" class="btn btn-default pull-right" data-dismiss="modal">No</button>
            </div>
            <br />
        </div>
    </div>
</div>

Here is my JavaScript:

$('body').on('click', '.delete_item', function(e){
e.preventDefault();
var url = $(this).data('url');
var data = 'item_id=' + $(this).data('item_id');
var btn = $(this);

$(btn).parents('form').children('.modal').modal('show');

$('.modal-body').on('click', '.confirm_delete', function(e){
    e.preventDefault();
    var confirm = $(this);
    $.ajax({
        type: 'post',
        url: url,
        data: data,
        dataType: 'json',
        cache: false,
        success: function(data){
            if(data.status)
            {
                $(btn).parent('.btn').remove();
            }
            else
            {
                alert('error');
            }
        },
        complete: function(){
            $(confirm).parents('.modal').modal('hide');
        }
    });
});

});

Answer 1

It is because there are multiple click event handlers registered when the second delete button is clicked.

Remove the previous handler using off() as one solution

$('body').on('click', '.delete_item', function (e) {
    e.preventDefault();
    var url = $(this).data('url');
    var data = 'item_id=' + $(this).data('item_id');
    var btn = $(this);

    $(btn).parents('form').children('.modal').modal('show');

    $('.modal-body').off('click.confirm').on('click.confirm', '.confirm_delete', function (e) {
        e.preventDefault();
        var confirm = $(this);
        $.ajax({
            type: 'post',
            url: url,
            data: data,
            dataType: 'json',
            cache: false,
            success: function (data) {
                if (data.status) {
                    $(btn).parent('.btn').remove();
                } else {
                    alert('error');
                }
            },
            complete: function () {
                $(confirm).parents('.modal').modal('hide');
            }
        });
    });
});