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

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();">

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

 

}

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(){
$('#deleted').delegate("button",'click',function(){  被选元素的子元素---->deleted为form 表单 button为表单中的按钮              
checked = [];            
$('input:checkbox:checked').each(function() {                
checked.push($(this).val());            
});            
$('#getvalues').val(checked);  //给隐藏域设置属性        
})
})

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('a', 'click', function() { blah() });

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!