在（）上使用jQuery在Ajax之後取消事件處理

如果通過正常的頁面加載加載，下面的JS代碼工作正常。但是，如果包含此代碼的頁面通過Ajax刷新，則click會多次註冊，每次頁面通過Ajax刷新時都會註冊一次。您可以通過單詞「已保存」的打印次數或console.log消息「#SavedBtn clicked」出現的次數來說明。在（）上使用jQuery在Ajax之後取消事件處理

當頁面通過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();       
});

來源

2013-03-14 tim peterson

你真的需要使用事件代表團參加此項活動？只有一個'saveBtn'（如果不止一個，你做錯了。）如果你直接綁定它，你就不會有這個問題。 – 2013-03-14 17:41:15

我使用'on（）'/ event delegation，因爲當頁面加載時'saveBtn'不在DOM中。此外，它只是一個簡單的演示。當然，實際的用例更加複雜。 – 2013-03-14 17:42:42

但是，當你加載ajax的時候，對嗎？和Ajax運行代碼？ – 2013-03-14 17:43:14

你可以爲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();       
});

來源

2013-03-14 17:41:16 jjnguy

在（）上使用jQuery在Ajax之後取消事件處理

回答

相關問題