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

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

問題的解決方法

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

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

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

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

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

總結(jié)

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

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

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

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