javascript - 使用jQuery on()时在Ajax之后取消事件处理

如果通过常规页面加载来加载，下面的JS代码可以正常工作。但是，如果包含此代码的页面是通过Ajax刷新的，则click会被多次注册，每次通过Ajax刷新页面的次数都为一次。您可以通过打印“已保存”一词的次数或console.log消息“ #SavedBtn clicked”出现的次数来告知。

通过Ajax加载页面时，有什么方法可以取消点击处理程序的设置吗？

HTML：

<button type='button' id='saveBtn'></button>

JS：

$(document.body).on('click', '#saveBtn', function(){
    var t='<span class="savedSpan">Saved</span>';
    $(this).after(t);
    console.log('#saveBtn clicked');
    $('.savedSpan').animate({
        color: "#FFF4D2"
        }, 1000).fadeOut();
});

最佳答案

您可以在呼叫off()之前先呼叫on()。这将删除处理程序，然后再添加另一个处理程序。

该代码可能类似于：

$(document.body).off('click', '#saveBtn');
$(document.body).on('click', '#saveBtn', function(){
    var t='<span class="savedSpan">Saved</span>';
    $(this).after(t);
    console.log('#saveBtn clicked');
    $('.savedSpan').animate({
        color: "#FFF4D2"
        }, 1000).fadeOut();
});