jQuery用on()方法綁定了事件之後，在程式碼執行過程中，可能會遇到事件被多次執行的情況。本來以為是事件冒泡的問題，後來發現是on()方法的特性引起的問題。

簡單還原一下問題的場景

這裡簡單還原一下問題的場景，使用一個按鈕給另一個按鈕通過on()方法繫結事件。

html的部分

<input id="bindEventBtn" type="button" value="給按鈕繫結事件的按鈕" />
<input id="noEmotionBtn" type="button"  value="我是一個莫得感情的按鈕" />

JavaScript的部分

$(function(){
    $(‘#bindEventBtn‘).click(function () {
        $(‘#noEmotionBtn‘).on(‘click‘, function () {
            alert(‘我是一個莫得感情的按鈕‘);
        });
    });
})
 

這樣，當多次點選bindEventBtn按鈕，就會將同一個事件多次繫結到noEmotionBtn按鈕上。

而on()方法的一個特性是綁定了多少次就觸發多少次的，這就是問題所在。

資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

問題的解決方法

解決問題的方法有兩個，大體就是對重複繫結的事件進行解綁。

1.使用off()方法解綁。

$(‘#noEmotionBtn‘).off(‘click‘).on(‘click‘, function () {
    alert(‘我是一個莫得感情的按鈕‘);
});

2.使用unbind()方法解綁。

$(‘#noEmotionBtn‘).unbind(‘click‘).on(‘click‘, function () {
    alert(‘我是一個莫得感情的按鈕‘);
});

總結

實際的場景可能會複雜得多，因此在使用on()方法給元素繫結事件的時候要格外注意多次重複繫結的問題。

但是解決問題的大體思路是一樣的，建議是統一先使用off()方法去解綁事件，避免出錯。

當然了，最好是從根源上找到問題，也就是避免多次繫結事件的事情發生。

另外的，如果要給一個元素在多個地方繫結不同的事件處理函式的話，可能就要另外想想辦法了。