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

 更新时间:2014年01月03日 09:39:01   作者:  
本篇文章主要是对jquery事件重复绑定的快速解决方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

一 $.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>

相关文章

  • JQuery获得内容和属性方法解析

    JQuery获得内容和属性方法解析

    这篇文章主要介绍了JQuery获得内容和属性方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • jQuery+Ajax实现无刷新操作

    jQuery+Ajax实现无刷新操作

    这篇文章主要介绍了jQuery+Ajax实现无刷新操作,分享了采用Ashx+jQuery Ajax实现“无刷新登录”的例子,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • IE8下String的Trim()方法失效的解决方法

    IE8下String的Trim()方法失效的解决方法

    String的Trim()方法失效,在ie8下是有这样的情况的,解决方法也很简单使用$.trim(str)即可,需要的朋友可以了解下
    2013-11-11
  • jquery精度计算代码 jquery指定精确小数位

    jquery精度计算代码 jquery指定精确小数位

    这篇文章主要为大家详细介绍了jquery精度计算代码,jquery指定精确小数位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 真正的JQuery.ajax传递中文参数的解决方法

    真正的JQuery.ajax传递中文参数的解决方法

    许多人在使用JQuery.ajax方法时肯定会遇到一个问题。在编码不是UTF-8的时候,当传递的参数里有中文的时候,服务端Request的时候都会出现乱码。
    2011-05-05
  • jQuery.Form上传文件操作

    jQuery.Form上传文件操作

    这篇文章主要介绍了jQuery.Form上传文件操作,首先需要我们先建立test文件夹,具体代码内容大家通过本文学习下吧
    2017-02-02
  • 7个jQuery最佳实践

    7个jQuery最佳实践

    这篇文章主要为大家分享了7个jQuery最佳实践,在使用JavaScript库的时候,有哪些最佳实践,又有哪些不好的实践呢?感兴趣的小伙伴们可以参考一下
    2016-01-01
  • jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    这篇文章主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下
    2019-05-05
  • Jquery中ajax方法data参数的用法小结

    Jquery中ajax方法data参数的用法小结

    本篇文章主要是对Jquery中ajax方法data参数的用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 基于jQuery实现动态搜索显示功能

    基于jQuery实现动态搜索显示功能

    这篇文章主要介绍了基于jQuery实现动态搜索显示功能的相关资料,输入数值自动匹配相关信息,感兴趣的小伙伴们可以参考一下
    2016-05-05

最新评论