jqueryはデリゲートを使用して動的に作成された要素にバインドされたイベントを削除するためにデリゲートをどのように使用しますか?

実際には、1 回限りの イベント を追加する必要がありますが、これは 1 つの方法を使用することで解決できます。

次のような機能を実現します: abc で始まる名前の a 要素は、初めてクリックされたときにその内容を出力します

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

しかし、このメソッドは動的に作成された要素をサポートしていません。作成者が 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'] 要素があり、一度クリックした後、再度クリックするとバインドが完了します。イベントはトリガーされなくなりました。

解決策: 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 は現在および将来の要素を処理します。 、大丈夫です 範囲を指定し、セレクターを指定し、イベントの数を減らし、走査速度を上げます、素晴らしいです。

bind、live、delegate は 1.9 以降推奨されなくなり、1 つだけがすべてを置き換えるようになりました~

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

以上がjqueryはデリゲートを使用して動的に作成された要素にバインドされたイベントを削除するためにデリゲートをどのように使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。