使用 jQuery 和 Ajax 启动 Bootstrap Modal 后，单击事件处理程序多次发生

Question

我设计了一个简单的模式，当用户尝试删除任何实体时，它的工作方式与 JavaScript 确认类似。当用户点击“删除”图标时，在图标的点击事件中会启动以下模式。

如果用户单击“是”，则会发送一个 ajax 请求以删除该项目。当发送第一个 ajax 请求时，它工作得很好。但是当用户再次尝试执行相同的操作时，它会发送两个请求，依此类推以进行下一次尝试。我不知道出了什么问题。

这是我的“删除图标”HTML：

<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>

对于模态：

<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>

这是我的 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

这是因为在点击第二个删除按钮时注册了多个点击事件处理程序。

使用off() 作为一种解决方案删除以前的处理程序

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