使用jQuery和Ajax启动Bootstrap Modal后，会多次出现Click事件处理程序

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