jQuery Girl
  1. jQuery Girl
  3. Evénement JQuery répété dans un contenu dynamic
Intereting Posts
JQuery met à jour dynamicment l’option «autre» dans la sélection JQuery valildator ne fonctionne pas jQuery width () ne renvoie pas la valeur correcte sur une div avec un contenu généré superposer avec du contenu php dynamic de la bonne façon? La nouvelle mise à jour de jQuery mobile nécessite un serveur Web pour fonctionner Changer la propriété CSS d’une autre div située dans une autre page Intégration de jQuery dans une application Web ASP.NET existante? JQuery ne localise pas les éléments DOM lors de l’utilisation de la composition de Durandal Sélectionnez une ancre dans un onglet JQUERY à partir d’un lien situé sur une autre page Web. Est-il possible d’inclure une liste déroulante MultiSelect dans un jqGrid? trouver si un img a alt dans jquery sinon append dans un tableau Convertir une chaîne en object JSON identifier le type d’object sélectionné dans Fabricjs jquery draggable options Comment attendre qu’une fonction se termine avant d’exécuter une autre fonction

Evénement JQuery répété dans un contenu dynamic

Dans une page d’un site Web que je suis en train de créer, il suffit d’appuyer sur un bouton pour importer le contenu d’une autre page php et l’append à la page. Cependant, cette autre page contient JQuery et l’événement click ($ (“.ExpandRoleButton”). Click) se répète sur les éléments précédents à chaque fois que j’importe le contenu. Donc, si j’ajoute 3 éléments;

Elément 1: Répète l’événement de clic 3 fois

Élément 2: Répète l’événement de clic 2 fois

Élément 3: exécute l’événement click une fois 

$("#AjouterPiece").click(function() { $.blockUI({ message: '
Un moment svp.
' }); $.post("wizardincl/piste.php", {newPiste: newPiste}, function(data) { $("#wizardPistes").append(data); $.unblockUI(); $(".divNewPiste").fadeTo(300, 1); $("#nbExemplaires").attr("max", newPiste); newPiste++ $( ".ExpandRoleButton").click(function() { if ($(this).hasClass('RetractRoleButton')) { $(this).find('img').attr('src', 'images/ExpandPetitNoir.png'); var that = $(this); $(this).parent().parent().parent().parent().next().slideUp(500, function() { that.parent().parent().parent().parent().css('border-bottom', '1px solid #FF790B'); }); $(this).removeClass('RetractRoleButton'); } else { $(this).parent().parent().parent().parent().css('border-bottom', 'none'); $(this).find('img').attr('src', 'images/ExpandPetitNoirRetour.png'); $(this).parent().parent().parent().parent().next().slideDown(500); $(this).addClass('RetractRoleButton'); } }); }); });

Actuellement, une partie du site Web de JQuery semble en panne et après quelques recherches, je ne trouve plus rien qui puisse résoudre le problème. Est-il possible d’empêcher le code de se répéter de la sorte?

En effet, vous liez l’événement à plusieurs gestionnaires d’événements. Au premier #AjouterPiece , tous les boutons .ExpandRoleButton sont .ExpandRoleButton à un gestionnaire onclick.

Au prochain #AjouterPiece , il sera de nouveau lié.

Pour éviter cela, vous devez unbind les gestionnaires de clics à l’aide du code suivant avant de le lier. 

 $( ".ExpandRoleButton").unbind('click')

Vous pouvez transmettre l’événement avec .click(function(e) {...}) , puis appeler e.stopImmediatePropagation() pour ne déclencher que le gestionnaire actuel, mais cela ne e.stopImmediatePropagation() que le symptôme, pas le vrai problème.

Edit: assurez-vous que vous ne liez que la nouvelle instance du bouton en ajoutant un contexte à votre sélecteur, tel que $('.ExpandRoleButton', data) . Comme vous faites correspondre une classe, ce sélecteur saisira tous les boutons de la page; le contexte vous permet de sélectionner uniquement celui qui se trouve dans votre résultat.

Une bonne pratique (uniquement pour éviter des problèmes de ce type, ajout de gestionnaires de clics multiples involontaires) consiste à .. 

 $(".selector").off('click').on('click', function...

ou 

 $(".selector").unbind('click')... $(".selector").bind('click')...