登录  /  注册
首页 > web前端 > js教程 > 正文

jquery如何使用undelegate去掉用delegate为动态创建元素绑定的事件?

黄舟
发布: 2017-06-26 10:58:27
原创
1210人浏览过

其实是需要添加一次性事件,原本用one方法,就可以解决。

实现这样的功能,如:name为abc开始的a元素 第一次点击时输出它的内容

$("a[name^='abc']").one(function(
    console.log($(this).html());
));
登录后复制

但是one方法不支持动态创建的元素。所有用 delegate

$(document).delegate("a[name^='abc']","click",function(){    console.log($(this).html());    //这里我需要点击一次后 再删除此click绑定

    $(document).undelegate($(this),"click"); //这句不管用
    $(this).undelegate("click"); //也不管用

    //手册上说undelegate第一个参数需要指定一个单独的selector,
    //a[name^='abc']取到的是一个元素集,用它后会删除掉所有绑定。
    //没有被点过的也删除了。求解,我只需要被点一次后的元素删除click事件})
登录后复制

楼主的意思应该是: 页面有多个 a[name=^'abc']的元素, 通过委托在document绑定了click事件,绑定成功,需要在点击一次后,再次点击不再触发事件;

解决方法: 1. 利用 $object.data()存储数据,判断是否被点击过;

$(document).on('click', 'a[name^="abc"]', function(e) {   //委托,实现绑定click事件
            if (!$(this).data('clicked')) {   //判断是否已经被点击,
                                              // 第一次点击因为 $(this).data('click')为 undefined 
                linkClickHandler.call(this);  //调用处理函数
                $(this).data('clicked', true); //设置  "已点击"
            }            return false;   //返回false,阻止默认行为,因为 <a>自动跳转
        });function linkClickHandler() { // 事件处理函数
            // 函数中的this指向触发的元素 , 为 DomElement类型
            //TODO 
            console.log($(this).text());
        }
登录后复制

用on 不要用delegate了

<div id="target">test</div><script type="text/javascript">$(&#39;#target&#39;).on(&#39;click&#39;, function() {    var self = $(this);
    alert(self.text());
    self.off(&#39;click&#39;);
});
登录后复制

on包办现在和未来的元素,还可以指定范围,指定seletor,减少事件数量,提高遍历速度,棒棒哒。

bind, live, delegate在1.9后就已经不推荐了,现在只要一个on代替曾经所有~

//举个例子
$(document).ready(function(){
  $("body").delegate("p","click",function(){
    //do some
  });
  $("button").click(function(){
    $("body").undelegate();
  });
});
登录后复制

以上就是jquery如何使用undelegate去掉用delegate为动态创建元素绑定的事件?的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
关于CSS思维导图的课件在哪? 课件
凡人来自于2024-04-16 10:10:18
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号