jQuery使用on()技巧绑定的事件被执行多次的问题
发布时间：2021-12-05 09:56:42 所属栏目：教程 来源：互联网
导读：jQuery用on()方法绑定了事件之后，在代码执行过程中，可能会遇到事件被多次执行的情况。 本来以为是事件冒泡的问题，后来发现是on()方法的特性引起的问题。 简单还原一下问题的场景 这里简单还原一下问题的场景，使用一个按钮给另一个按钮通过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()方法去解绑事件，避免出错。 当然了，最好是从根源上找到问题，也就是避免多次绑定事件的事情发生。 另外的，如果要给一个元素在多个地方绑定不同的事件处理函数的话，可能就要另外想想办法了。  （编辑：桂林站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
