Jquery中按钮事件重复绑定导致事件多次触发解决办法
在用jquery绑定事件的时候,一般来说习惯性都是喜欢绑定匿名事件。比如下面的`
<body>
<input type="button" class="dv" value="按钮">
<script src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function () {
$(".dv").click(function () {// 第一种
alert("Hello World");
});
$(".dv").on("click",function () { //第二种
alert("Hello World");
});
$(".dv").bind("click",function () { //第三种
alert("Hello World");
})
})
</script>
</body>
由于是匿名事件,所以假如你这个事件是放在一个for循环里面的话,这样的匿名事件是会重复的叠加叠加上去,
之所以会叠加,是因为是匿名事件,会重复的创建空间给这个匿名事件,所以才会导致叠加,这个问题可以后面解决。
解决办法
第一种
如果这个事件的挂载元素是一个动态创建的元素的话,就可以避免这样的事件叠加。就是说用的时候创建出来,不用的时候就删除掉这个元素,明显这样的方法会比较的麻烦,我个人也不推荐使用。
第二种
就是在绑定这个事件之前,我们先解绑之前绑定的事件,这样就可以保证每次操作的时候都是只有一个时间,具体的操作就是,如果用on绑定的事件,你就用off取消绑定,再用on绑定事件。代码如下
$(".dv").off("click").on("click",function () { //第二种
alert("Hello World");
});
如果你用的是bind绑定的话就用unbind取消绑定,这样就可以避免使用匿名事件的时候事件会重复叠加到挂载元素中。
第三种
就是使用one来绑定事件,这样绑定的事件只会触发一次,但是如果这个事件放在循环里面的话,还是会出现问题,这是我自己遇到过的错误,具体怎么绑定事件,代码如下:
$(".dv").one("click",function () {
alert("Hello World");
})
最后一个办法就是从根本去解决,前面说到之所以会重复绑定到这个事件,是因为匿名函数,所以你可以把这个事件放到外面来,这样在循环的过程中,指针会一直指向这个已经创建的命名函数,不会重复创建空间。具体操作如下:
$(".dv").on("click",btn);
function btn() {
alert("Hello World");
}
可能刚接触的萌新们会问,为什么btn后面不加括号。这里简单的说,如果加了括号就是调用这个函数的返回值,不加括号才是调用这个函数。只要这么记就没有问题了。好了,希望能帮助到正在学习开发的你。