Javascript 在（）上使用jQuery时取消Ajax之后的事件处理

如果通过正常页面加载，下面的JS代码可以正常工作。但是，如果通过Ajax刷新包含此代码的页面，则会多次注册

单击

，每次通过Ajax刷新页面一次。您可以通过打印“Saved”（已保存）一词的次数或显示

console.log

消息“#SavedBtn clicked”（已保存）的次数来判断这一点

当通过Ajax加载页面时，是否有方法取消设置单击处理程序

HTML:

JS:

$（document.body）.on（'click'，'#saveBtn'，function（）{
var t='Saved'；
$（此）。在（t）之后；
console.log（“#单击saveBtn”）；
$（'.savedSpan'）。设置动画({
颜色：“FFF4D2”
}，1000）。衰减（）；
});

您可以在呼叫前先呼叫。这将在添加另一个处理程序之前删除该处理程序

代码可能如下所示：

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

$（document.body）.off（'click'，'#saveBtn'）；
$（document.body）.on（'click'，'#saveBtn'，function（）{
var t='Saved'；
$（此）。在（t）之后；
console.log（“#单击saveBtn”）；
$（'.savedSpan'）。设置动画({
颜色：“FFF4D2”
}，1000）。衰减（）；
});

您可以在呼叫前先呼叫。这将在添加另一个处理程序之前删除该处理程序

代码可能如下所示：

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

$（document.body）.off（'click'，'#saveBtn'）；
$（document.body）.on（'click'，'#saveBtn'，function（）{
var t='Saved'；
$（此）。在（t）之后；
console.log（“#单击saveBtn”）；
$（'.savedSpan'）。设置动画({
颜色：“FFF4D2”
}，1000）。衰减（）；
});

您真的需要为此事件使用事件委派吗？只有一个

saveBtn

（如果有多个，则说明您做错了）。如果直接绑定它，就不会出现此问题。我使用

on（）

/event委托，因为加载页面时，

saveBtn

不在DOM中。而且，这只是一个简单的演示。当然，实际的用例更复杂，但是当你加载ajax时，它就在dom中，对吗？ajax运行代码？@Kevin B：你说的事件委派是什么意思？因为只有一个

saveBtn

？。您通常使用这种方法将事件绑定到未来的元素，这些元素可以通过提供的选择器来创建。好吧，我要说的是（我承认很糟糕），他应该要么做，要么做，而不是两者都做。使用委派并只执行一次，或者不使用事件委派。您真的需要为此事件使用事件委派吗？只有一个

saveBtn

（如果有多个，则说明您做错了）。如果直接绑定它，就不会出现此问题。我使用

on（）

/event委托，因为加载页面时，

saveBtn

不在DOM中。而且，这只是一个简单的演示。当然，实际的用例更复杂，但是当你加载ajax时，它就在dom中，对吗？ajax运行代码？@Kevin B：你说的事件委派是什么意思？因为只有一个

saveBtn

？。您通常使用这种方法将事件绑定到未来的元素，这些元素可以通过提供的选择器来创建。好吧，我要说的是（我承认很糟糕），他应该要么做，要么做，而不是两者都做。可以使用委托并使其仅执行一次，也可以不使用事件委托。

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