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>

赞 (0)

相关推荐

  • javaScript 页面自动加载事件详解

    方法1: 复制代码 代码如下: Window.onload=function(){   Var name=document.getElementById("name").val();//加载HTML,并且加载外部所有所有的引用文件(图片,css样式,js等)} 方法2:需要引入Jquery的 .js文件 复制代码 代码如下: $(document).ready(function(){         alert("JQuery的第一个入门案例");//加载HTML,

  • jQuery与JS加载事件用法分析

    jQuery与JS加载事件用法分析

    本文实例分析了jQuery与JS加载事件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • 浅谈jQuery双事件多重加载的问题

    如下所示: <html> <a href="1**.html"> <button onclick="buttonEvent()">点击事件</button> </a> </html> function buttonEvent(){ location.href = "2**.html"; } 如代码显示那样,当点击button按钮的时候想跳转到2**.html页面.但是,这个最

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

    一 $.fn.live 重复绑定 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. 复制代码 代码如下: //先通过die()方法解除,再通过live()绑定$("#selectAll").die().live("click",function(){//事件运行代码}); 二 click等事件 解决:使用unbind("click")方法先解除绑定的事件再绑定新事件

  • js鼠标单击和双击事件冲突问题的快速解决方法

    情况一 如果在一个DOM对象上同时绑定单击(click)和双击(dblclick)事件,当在这个DOM对象上发生双击事件时,第一次点击(click)会 触发一次单击(click)事件,第二次点击(连续的)也会触发双击(dblclick)事件,还是会触发单击(click)事件(IE7与 firefox). 解决方法: <button onclick="test(1)" ondblclick="test(2)"></button> <scr

  • jquery中的常见问题及快速解决方法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click(function(){ $.ajax({ do something }); return false; }) 2 去除选中元素的某一个属性使用removeattr 3 javascript中与时间相关的函数有setInterval("function",millisec[,"la

  • Ajax局部更新导致JS事件重复触发问题的解决方法

    如果在页面中包含一个ajax更新的列表,那么需要小心非动态更新部分的事件处理. 以带有公共工具栏的列表界面为例: | Menu1 | Menu2 ---------------------------------------------------------------------------- ID TITLE DESCRIPTION OPERATION 1 test1 hey test X - ... 2 test2 why not X - ... --------------------

  • jQuery防止重复绑定事件的解决方法

    本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册

  • JQuery.validate在ie8下不支持的快速解决方法

    一.在ie8下回有问题的代码 1.JQuery.validate验证框架是通过页面form表单提交验证<input/>标签中输入是否符合自己的规则的 <form id="cardTypeFrm"> <table width="100%" cellspacing="0" cellpadding="0" class="table_pzh"> <tbody> <

  • 关于动态生成dom绑定事件失效的原因及解决方法

    之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试了一下: 1. 事件失效的原因: (1)bind事件绑定只对dom中存在的元素有效,对于我们后来动态增加的元素是监测不到,所以绑定不了 (2)同样,当你使用var aa = document.getElementsByTagName("动态生成的元素");来获取动态生成的元素的时候也是获取

  • JavaScript中解决多浏览器兼容性23个问题的快速解决方法

    一.document.formName.item("itemName") 问题 问题说明:IE下,可以使用 document.formName.item("itemName") 或 document.formName.elements ["elementName"]:Firefox 下,只能使用document.formName.elements["elementName"]. 解决方法:统一使用document.formNa

  • Angular懒加载机制刷新后无法回退的快速解决方法

    Angular懒加载机制刷新后无法回退的快速解决方法

    今天在项目中遇到一个很奇怪的问题,使用oclazyload懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮 ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码. angular懒加载机制刷新后无法回退的解决方案 : 通过查看angular(ionic)的源码发现$browser这个服务上有个on

  • ajax传送参数含有特殊字符的快速解决方法

    JQuery AJAX中遇到这样一个问题,参数中包含特殊字符,比如&'#@等, 这时执行AJAX的时候就会出问题,因为所传的参数变了.看个示例就明白: 方案一: $.ajax({ url: '/ashx/ajax.ashx', type: 'post', data: 'option=delete&name=11&adb, success: function (data) { if (data != 'error ') { } } }); ' 上面执行的ajax就是异步删除一个nam

随机推荐