Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la façon dont la méthode déléguée dans jQuery implémente les événements de liaison de requête Ajax sans les perdre

黄舟
Libérer: 2017-06-26 10:12:14
original
1533 Les gens l'ont consulté

Après avoir lié un événement click à un élément, j'ai rencontré un problème : lors de l'exécution de certaines requêtes ajax et de l'appel à nouveau de cette page, l'événement click à l'intérieur est devenu invalide

Pour exemple : Ma pagination est une requête ajax, mais lorsque je clique sur la page suivante, l'élément a généré n'a pas d'événement de clic

Problèmes rencontrés en réalisant des projets par moi-même :

Objectif : Supprimer les cases à cocher par lots. Lorsque vous cliquez sur Supprimer, l'événement onclick lié au bouton à l'aide de jquery est déclenché pour obtenir les valeurs de toutes les cases à cocher <.>

1. Il n'y a aucun problème lors de l'injection directe de smarty dans la page d'appel pour la première fois. Lorsque la page est à nouveau appelée pour lister les enregistrements basés sur une requête conditionnelle (implémentation Ajax), le clic. l'événement échoue

Raison : le chargement du contenu ajax est une opération après $(document).ready(). À l'heure actuelle, lors de la liaison de la fonction, l'ensemble des éléments trouvés n'inclut pas le contenu chargé par ajax, il n'y a donc aucun problème avec celui d'origine, mais ceux chargés ultérieurement ne sont pas liés

Solution finale :

1. Utilisez la méthode délégué() de jQuery

2. Utilisez du js natif pour écrire la valeur du chèque. dans la fonction de vérification de soumission,

<form method="post" action="channel_code_manage.php?act=removeall" name="listForm" id="deleted" class="fn-mt20" onsubmit="
return
 checkbox();">
Copier après la connexion


Il y a une valeur, la vérification est réussie et la valeur est affecté à une valeur de champ masquée

Aucune valeur, renvoie

function checkbox() {
       var compatibility = "",input = document.getElementsByTagName("input"),value;
       for (var i = 0; i < input.length; i++) {
           if (input[i].type == "checkbox") {
               if (input[i].checked) {
                   value = input[i].value;
                   if(value!=&#39;on&#39;){                   给全选按钮value设置为on  排除此选项
                       compatibility += value + ",";           拼接字符串
                   }}

}
       }
       compatibility = compatibility.substring(0,compatibility.lastIndexOf(","));  //删除最后的,

 

if(!compatibility){  //如果字符串为空 ,返回false
           alert(&#39;请选择要删除的记录&#39;);
           return false;
       }else{
           document.getElementById(&#39;getvalues&#39;).value=compatibility;   //如果字符串不为空 把值赋值给隐藏于提交
           confirm(&#39;确定批量删除?&#39;);
       }

 

}
Copier après la connexion

Solution :

1 . Reliez l'événement une fois la requête ajax réussie

2
Utilisez la méthode délégué(sel,[type],[data],fn) de jquery. La méthode live() est obsolète

$(document).delegate('a', 'click', function() { blah() }) Résolution de la requête Ajax d'événement de liaison n'invalide pas

L'élément spécifié (un élément enfant

qui est un élément sélectionné) ajoute un ou plusieurs gestionnaires d'événements et spécifie des fonctions à exécuté lorsque ces événements se produisent.

Les gestionnaires d'événements utilisant la méthode délégué() s'appliquent aux éléments actuels ou futurs (tels que les nouveaux éléments créés par des scripts).

Paramètres :

sélecteur : Chaîne de sélection pour l'élément filtre qui déclenche l'événement.

type :Un ou plusieurs événements attachés à l'élément. Plusieurs valeurs d'événement séparées par des espaces. Doit être un événement valide.

data :Données supplémentaires transmises à la fonction

fn :Fonction à exécuter lorsque l'événement se produit

$(function(){
$(&#39;#deleted&#39;).delegate("button",&#39;click&#39;,function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
checked = [];            
$(&#39;input:checkbox:checked&#39;).each(function() {                
checked.push($(this).val());            
});            
$(&#39;#getvalues&#39;).val(checked);  //给隐藏域设置属性        
})
})
Copier après la connexion
Solution parfaite au problème, haha !

Extension :

Dans l'ancienne version de jQuery, lorsque vous devez répondre à un événement sur le contenu de la page d'un certain fragment chargé par ajax, vous pouvez utiliser fonction live pour répondre à ses événements, tels que : $('a').live('click', function() { blah() });

Dans les versions plus récentes de jQuery, la fonction live a été abandonné Utilisé,

Ensuite, comment implémenter la fonction live dans la nouvelle version, c'est-à-dire que lorsque le fragment de page est chargé par ajax, comment le contenu de ce fragment de page répond-il aux événements associés ?


Il existe plusieurs méthodes. Cet article n'en propose que deux simples :

  • La première consiste à importer directement jquery-migrate pour que la fonction live puisse utiliser, mais n'optimise pas les performances.

  • L'autre consiste à utiliser la fonction délégué pour implémenter la fonction live

  • $(document).delegate(&#39;a&#39;, &#39;click&#39;, function() { blah() });
    Copier après la connexion

    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
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!