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!='on'){ 给全选按钮value设置为on 排除此选项 compatibility += value + ","; 拼接字符串 }} } } compatibility = compatibility.substring(0,compatibility.lastIndexOf(",")); //删除最后的, if(!compatibility){ //如果字符串为空 ,返回false alert('请选择要删除的记录'); return false; }else{ document.getElementById('getvalues').value=compatibility; //如果字符串不为空 把值赋值给隐藏于提交 confirm('确定批量删除?'); } }
Solution :
1 . Reliez l'événement une fois la requête ajax réussie2
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 enfantqui 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); //给隐藏域设置属性 }) })
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 ?$(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!