javascript - jquery怎么用undelegate去掉用delegate为动态创建元素绑定的事件？-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - jquery怎么用undelegate去掉用delegate为动态创建元素绑定的事件？

伊谢尔伦 2017-04-10 15:20:22

[JavaScript讨论组]

543

其实是需要添加一次性事件，原本用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事件

})

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(4)

伊谢尔伦2017-04-10 15:22:22 4楼

楼主的意思应该是：
页面有多个 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());
        }

赞 +0

添加回复

怪我咯2017-04-10 15:22:22 3楼

用on 不要用delegate了

<p id="target">test</p>

<script type="text/javascript">

$('#target').on('click', function() {
    var self = $(this);
    alert(self.text());
    self.off('click');
});

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

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

以上

赞 +0

添加回复

PHP中文网2017-04-10 15:22:22 2楼

同意楼上的，bind,delegate都是用on实现的，在jq-1.11.2中，源码如下：

jQuery.fn.extend({
    hover: function( fnOver, fnOut ) {
        return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
    },

    bind: function( types, data, fn ) {
        return this.on( types, null, data, fn );
    },
    unbind: function( types, fn ) {
        return this.off( types, null, fn );
    },

    delegate: function( selector, types, data, fn ) {
        return this.on( types, selector, data, fn );
    },
    undelegate: function( selector, types, fn ) {
        // ( namespace ) or ( selector, types [, fn] )
        return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
    }
});

赞 +0

添加回复