Javascript ajax 成功函数多次触发

Question

在我的项目中，我正在开发一个函数，该函数使用 .ajax() 从表和数据库中删除行。我已经为用户单击删除按钮创建了我的函数。如您所知，有几行，每一行都有自己的删除按钮。

现在，当用户第一次点击其中一个时，会出现一个弹出窗口，询问他/她是否确定要删除该项目。当他/她单击"is"时，弹出窗口消失并且该行淡出。这一切都很完美，但是......

当您点击第二个删除按钮而不刷新页面时，JavaScript 触发当前请求的删除(和id)+ de 前一个。如果你第三次这样做，它会触发当前的和之前的两个。

我试图清空当前的 var $(this).attr('data-page-id');，但是当 .ajax() 成功函数被触发。

$('a.btn-page-delete').click(function() {

    var curPageId = $(this).attr('data-page-id');

    $('#delete-page').modal('show');

    $('a#action-confirm').click(function() {

        $.ajax({

            type       : 'POST',
            url        : '/pages/async/delete',
            dataType   : 'json',
            data       : { page : curPageId },
            success    : function(data) {

                $('#delete-page').modal('hide');

                console.log(curPageId);
                console.log(data);

            },
            error   : function() {}

        });

    });

});

Answer 1

当您的外部点击事件处理程序被调用时

$('a.btn-page-delete').click(function() {

它会 .bind() 另一个点击事件处理程序到 $('a#action-confirm') 每次。因此，每次执行外部事件时，您都会再添加一个事件处理程序。

我相信你可以而且应该以更好的方式重新构建和构建它，但在目前的状态下你唯一的选择是 .unbind()/.off( ) 内部点击处理程序，例如

 $('a#action-confirm').off('click').click(function() {

这将删除之前通过 jQuery 绑定(bind)的任何点击事件处理程序。

引用:.off()