jquery事件重复绑定的快速解决方法

前端技术 2023/09/08 JavaScript

一 $.fn.live 重复绑定

解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件。

复制代码 代码如下:

//先通过die()方法解除,再通过live()绑定
$(“#selectAll”).die().live(“click”,function(){
//事件运行代码
});

二 click等事件

解决:使用unbind(\"click\")方法先解除绑定的事件再绑定新事件,即在给对象绑定事件之前先移除该对象上的原有事件

完整测试代码:

复制代码 代码如下:

<div class=\"box\">
            <button id=\"test\">重复绑定触发按钮</button>(点击此按钮两次及以上,即可触发重复绑定,再点击下面的按钮就可看到结果)
            <br/><br/>
            <button id=\"test1\">click重复绑定测试按钮</button>
            <button id=\"test2\">click绑定一次测试按钮</button>
            <button id=\"test3\">live重复绑定测试按钮</button>
            <button id=\"test4\">live绑定一次测试按钮</button>
        </div>
        <script type=\"text/javascript\" src=\"../static/jquery-1.6.1.min.js\"></script>
        <script type=\"text/javascript\">
            $(function(){
                var i = 1,j=1,k=1,h=1,n=1;
                var triggerBind = function(){
                    $(\"#test1\").click(function() {
                        alert(\"click未解除绑定重复绑定执行第\" + j++ + \"次\");
                    });
                    $(\"#test2\").unbind(\'click\').click(function() {
                        alert(\"click解除绑定执行\" + k++ + \"次\");
                    });

                    $(\"#test3\").live(\"click\",function() {
                        alert(\"live未解除绑定重复执行第\" + h++ + \"次\");
                    });
                    $(\"#test4\").die().live(\"click\",function() {
                        alert(\"live解除绑定后执行\" + n++ + \"次\");
                    });
                }               
                $(\"#test\").click(function() {
                    triggerBind();
                    alert(\"触发绑定点击第\" + i++ + \"次\");
                });
            });
        </script>

本文地址:https://www.stayed.cn/item/21870

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。