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后面不加括号。这里简单的说，如果加了括号就是调用这个函数的返回值，不加括号才是调用这个函数。只要这么记就没有问题了。好了，希望能帮助到正在学习开发的你。