How does jquery use undelegate to remove events bound to dynamically created elements using delegate?

In fact, we need to add a one-time event, which can be solved by using the one method.

Achieve such a function, such as: the a element whose name starts with abc outputs its content when clicked for the first time

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

But the one method does not support dynamically created elements. All the posters using 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事件})

should mean: The page has multiple a[name=^'abc'] elements. The click event is bound to the document through delegation. If the binding is successful, it needs to be clicked once. After that, clicking again will no longer trigger the event;

Solution: 1. Use $object.data() to store data and determine whether it has been clicked;

$(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());
        }

Use on instead of 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 arranges the present and future elements, you can also specify the range and selector, reduce the number of events, increase the traversal speed, great.

bind, live, delegate are no longer recommended after 1.9, now only one on replaces all~

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

The above is the detailed content of How does jquery use undelegate to remove events bound to dynamically created elements using delegate?. For more information, please follow other related articles on the PHP Chinese website!