jquery使用on()方法綁定的事件被執行多次的問題

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()方法的一個特性是綁定了多少次就觸發多少次的，這就是問題所在。

問題的解決方法

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

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

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

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

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

總結

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

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

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

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

 

"當一個人用心去創造一樣東西時，它便有了靈魂。"