小5聊jQuery使用on绑定未来元素同时off仍然出现被绑定多次click点击事件分析和原因，自己挖坑系列

Posted 2021-11-04 小5聊

给未来元素绑定点击事件，绑定前也使用off解绑，依然出现点击一次实际执行多次情况，但是点击其他的又没问题，那么就要检查下自己函数写法是否有问题

1、仍然出现多次click点击的代码

• 多次执行的情况

•  代码

<meta charset="utf-8" />
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item-label-div" data-num="123456789" data-flag="open">
    <span>测试click - One</span>
</div>

<div class="item-label-div" data-num="987654321" data-flag="close">
    <span>测试click - Two</span>
</div>

<script type="text/javascript">

    $(function () {

        $(".item-label-div").off("click");
        $(".item-label-div").click(function () {
            console.log("testtest");

            var num = $(this).attr("data-num");

            $("div[data-num='" + num + "']").trigger('click');
        });
    });
</script>

2、原因和解决方法

• 原因 

使用了trigger方法，其实又是重新调用了一次，这样就出现了无限循环，google浏览器检测到快速无限循环后，直接提前抛出异常

• 解决

做一个逻辑判断，停止多次执行