关于新增元素使用jQuery on()方法重复绑定的问题

来源：互联网发布：慈安和慈禧的关系知乎编辑：程序博客网时间：2024/04/29 13:31

最近写ajax新增元素button绑定click事件的时候发现元素重新添加进来的时候会多执行一次事件函数，找了半天，怀疑是on()的问题，于是测试了一下，果然是因为on()的使用方式造成了有的新增元素会执行多次绑定事件函数。

当使用$(document).find('target-selector').on(event,function);时，必须在元素每次添加进来之后重新绑定，否则会无效。

而使用$(document).on(event,selector,function);时，只需执行一次绑定即可，可以在开头就写好绑定，对后面添加进来的元素都有效，如果在元素每次添加进来之后都绑定，则绑定了几次，触发事件的时候就会执行几次事件函数。

下面是一个测试来说明这个问题（需要jQuery）。

<!DOCTYPE html><html><head><meta charset="utf-8" /><script type="text/javascript" src="js/jquery-1.11.1.min.js"></script><title>Just a test.</title><style>button {margin: 10px;}</style><script>$(document).ready(function() {$('.addOnTest').click(function() {var buttons = '<button class="onTest1">使用.find().on(event,function)的按钮</button><button class="onTest2">使用.on(event,selector,function)的按钮</button>';$('.test').append(buttons);});$('.delOnTest').click(function() {$('.onTest1').remove();$('.onTest2').remove();});$('.ontest').click(function() {$(document).find('.onTest1').on('click', function() {alert('111');});$(document).on('click', '.onTest2', function() {alert('222');});});});</script></head><body><div class="test"><button class="addOnTest">新增两种类型的按钮</button><button class="delOnTest">删除两种类型的按钮</button><br /><button class="ontest">为新增按钮绑定事件</button><br /></div><p>测试步骤：<br /> 1、点击“新增两种类型的按钮”新增两个不同类型的按钮<br /> 2、点击“为新增按钮绑定事件”分别为两个新增按钮绑定点击事件<br /> 3、分别点击新增的两个按钮，可以发现，两个按钮点击时都执行了绑定的事件（都有alert）<br /> 4、点击“删除两种类型的按钮”，再点击“新增两种类型的按钮”<br /> 5、分别点击新增的两个按钮，可以发现，第一个按钮不执行绑定事件（没有alert），第二个按钮执行了绑定事件（有弹出alert窗口）<br /> 6、点击“为新增按钮绑定事件”<br /> 7、分别点击新增的两个按钮，可以发现，第一个按钮执行了一次绑定事件（一个alert），而第二个按钮执行了两次（两个alert）<br /></p></body></html>

所以，对新增的元素，要么每次都使用.on(event,function);绑定，要么只要使用$(document).on(event,selector,function);绑定一次就好了。

前端小白渣代码求轻喷~

1 0