解决jquery使用on()方法绑定事件被执行多次的问题
<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()方法去解绑事件,避免出错。
当然了,最好是从根源上找到问题,也就是避免多次绑定事件的事情发生。
另外,如果要给一个元素在多个地方绑定不同的事件处理函数的话,可能就要另外想想办法了。
评论