Maison > interface Web > js tutoriel > Comment jquery utilise-t-il undelegate pour supprimer les événements liés aux éléments créés dynamiquement à l'aide d'un délégué ?

Comment jquery utilise-t-il undelegate pour supprimer les événements liés aux éléments créés dynamiquement à l'aide d'un délégué ?

黄舟
Libérer: 2017-06-26 10:58:27
original
1400 Les gens l'ont consulté

En fait, vous devez ajouter un événement unique , qui peut être résolu en utilisant la seule méthode.

Réalisez une fonction telle que : un élément dont le nom commence par abc affiche son contenu lorsqu'on clique pour la première fois

$("a[name^='abc']").one(function(
    console.log($(this).html());
));
Copier après la connexion

Mais la méthode unique ne prend pas en charge les éléments créés dynamiquement. Toutes les affiches utilisant délégué

$(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事件})
Copier après la connexion

devraient signifier : La page comporte plusieurs éléments a[name=^'abc'] et l'événement de clic est lié au document via la délégation. Si la liaison réussit, il doit l'être Après avoir cliqué une fois, cliquer à nouveau ne déclenchera plus l'événement ;

Solution : 1. Utilisez $object.data() pour stocker les données afin de déterminer si elles ont été cliquées

<🎜 ; >
$(document).on(&#39;click&#39;, &#39;a[name^="abc"]&#39;, function(e) {   //委托,实现绑定click事件
            if (!$(this).data(&#39;clicked&#39;)) {   //判断是否已经被点击,
                                              // 第一次点击因为 $(this).data(&#39;click&#39;)为 undefined 
                linkClickHandler.call(this);  //调用处理函数
                $(this).data(&#39;clicked&#39;, true); //设置  "已点击"
            }            return false;   //返回false,阻止默认行为,因为 <a>自动跳转
        });function linkClickHandler() { // 事件处理函数
            // 函数中的this指向触发的元素 , 为 DomElement类型
            //TODO 
            console.log($(this).text());
        }
Copier après la connexion
Utiliser sur Ne pas utiliser Utiliser le délégué

<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;);
});
Copier après la connexion
on pour organiser les éléments présents et futurs Vous pouvez également spécifier la plage et le sélecteur pour réduire le nombre d'événements et augmenter la vitesse de parcours. super.

bind, live, délégué ne sont plus recommandés après la 1.9, désormais un seul sur les remplace tous ~

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal