Heim > Web-Frontend > js-Tutorial > Wie verwendet JQuery Undelegate, um Ereignisse zu entfernen, die mithilfe von Delegate an dynamisch erstellte Elemente gebunden sind?

Wie verwendet JQuery Undelegate, um Ereignisse zu entfernen, die mithilfe von Delegate an dynamisch erstellte Elemente gebunden sind?

黄舟
Freigeben: 2017-06-26 10:58:27
Original
1401 Leute haben es durchsucht

Tatsächlich müssen Sie ein einmaliges Ereignis hinzufügen, das mit der einen Methode gelöst werden kann.

Eine solche Funktion erreichen, wie zum Beispiel: Ein Element, dessen Name mit abc beginnt, gibt seinen Inhalt aus, wenn es zum ersten Mal angeklickt wird

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

Aber die eine Methode unterstützt keine dynamisch erstellten Elemente. Alle Poster, die 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事件})
Nach dem Login kopieren

verwenden, sollten bedeuten: Die Seite hat mehrere a[name=^'abc']-Elemente und das Klickereignis ist durch Delegation an das Dokument gebunden. Es muss sein: Nach einem Klick löst ein erneuter Klick das Ereignis nicht mehr aus.

Lösung: 1. Verwenden Sie $object.data(), um Daten zu speichern, um festzustellen, ob darauf geklickt wurde >

Verwenden Sie „on“ nicht. Verwenden Sie „delegate“
$(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());
        }
Nach dem Login kopieren

on, um die aktuellen und zukünftigen Elemente anzuordnen. Sie können auch den Bereich und den Selektor angeben, um die Anzahl der Ereignisse zu verringern und die Durchlaufgeschwindigkeit zu erhöhen Großartig.
<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;);
});
Nach dem Login kopieren

Bind, Live, Delegate werden nach 1.9 nicht mehr empfohlen, jetzt ersetzt nur noch einer sie alle ~

Das obige ist der detaillierte Inhalt vonWie verwendet JQuery Undelegate, um Ereignisse zu entfernen, die mithilfe von Delegate an dynamisch erstellte Elemente gebunden sind?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage