JQuery的一个问题：事件绑定后被多次执行

Posted 2023-03-19

比如下面的代码<br>html<br><input type="text" id="txt" onblur="fun();" /><br><input type="button" value="Button" id="btn" /><br><br>JQuery<br>function fun()<br> $("#btn").click(function()<br> alert("xxx");<br> );<br><br><br>我希望在文本框失去焦点时给按钮绑定一个点击事件，这样写有个问题，就是如果文本框在第二次以上失去焦点时，这个事件就会被重复赋给按钮，表现为点击之后弹出多个警告框。我希望在任何情况下点击按钮之后只弹出一个警告框，请问这个该怎么解决呢？

参考技术A 绑定只对已经生成的对象有用，因为你的住宿是动态生成的，所以在你执行绑定函数是这个对象并不存在，所以并没有绑定上。
解决方法
1、生成后重新执行一次绑定
2、在li标签中加入onclik

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()方法去解绑事件，避免出错。

当然了，最好是从根源上找到问题，也就是避免多次绑定事件的事情发生。

另外的，如果要给一个元素在多个地方绑定不同的事件处理函数的话，可能就要另外想想办法了。

 

"当一个人用心去创造一样东西时，它便有了灵魂。"