jquery on()執行兩次是一件很奇怪的事情。我們都知道,on()方法是用來綁定事件的。而如果我們對同一個元素使用on()方法綁定同一個事件兩次,那么這個事件將會被執行兩次。這是怎么回事呢?
// 綁定事件兩次 $('#myBtn').on('click', function() { console.log('點擊了按鈕') }); $('#myBtn').on('click', function() { console.log('又點擊了按鈕') });
上面的代碼綁定了兩次click事件,分別輸出了“點擊了按鈕”和“又點擊了按鈕”。這并不是我們想要的效果,我們只想讓事件執行一次。
原因是,on()方法并不會覆蓋之前綁定的同一個事件,它會將這些事件都保存起來,然后一次執行。因此,如果我們對同一個元素多次使用on()方法綁定同一個事件,那么這個事件就會被執行多次。
要避免這個問題,我們可以使用off()方法來移除之前綁定的事件:
// 綁定事件兩次,但只執行一次 $('#myBtn').on('click', function() { console.log('點擊了按鈕'); $('#myBtn').off('click'); }); $('#myBtn').on('click', function() { console.log('又點擊了按鈕'); });
上面的代碼先綁定了兩次click事件,但第一個事件執行后就移除了所有click事件的綁定,因此第二個事件不會被執行。
總之,要避免使用on()方法多次綁定同一個事件,如果必須要這樣做,請使用off()方法移除之前綁定的事件。