Ajax/Jquery créer de nouveaux éléments : comment attacher les listeners par défaut ?

Bonjour,

Je fais un appel Ajax dans du code Jquery, qui ressemble à ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

$.ajax({ type: 'POST', dataType: 'json', url: '/evenement/updateAgenda.php', data: { agenda_id: agenda_id, selection: 'duplicate' }, success: function(data) { clone = tr.clone(); // Actualise l'ID de l'élément dupliqué clone.attr('id', data.id); table.append(clone); } });

---

Cette dernière instruction me créé un nouvel élément <tr> qui contient des <input>, et sur ces input, j'ai des listeners qui ressemblent à ça :

Code:

---

1 2 3 4

$('input').click(function() { // etc. });

---

Mon problème est que le listener n'est pas exécuté pour les nouveaux input créés dynamiquement. Je pense qu'il s'agit d'un problème classique de javascript mais je n'arrive pas à y trouver une solution.

Merci de votre aide !

Comme toujours : il suffit de lire la doc : .on()

Merci (malgré la condescendance, car souvent lorsqu'on connait peu un langage, le problème de la doc est parfois de savoir quoi chercher).

Du coup, en remplaçant mon code par ceci :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

function statut_changed() { // etc. }; $('.prog_etat').on('click', statut_changed);   // ... success: function(data) { clone = tr.clone(); clone.attr('id', data.id);   if (clone.attr('class') == 'prog_etat') { clone.on('click', statut_changed); } if (clone.attr('class') == 'prog_etat' && clone.val() == 'reporte') { // etc. } // etc.   table.append(clone); }

---

tout marche nickel. Par contre, je trouve qu'il y a une redondance de déclaration des listeners très moche en implémentant cette solution. Y aurait-il une solution plus propre ?

Ca va peut-être te paraitre condescendant (:mrgreen:), mais il semble que tu n’aies pas tout lu. Notamment ce qui concerne le rôle du paramètre selector...

J'avais lu ça, mais au premier coup d'oeil je n'avais pas eu l'impression que ça me servait. Par contre, du coup effectivement ça me permet de pallier à mes conditionnelles ; mais je suis toujours obligé de dupliquer la déclaration de mes listeners.

Le mieux que j'ai trouvé à faire, c'est de déclarer une fonction d'initialisation des listeners, et de la rappeler lors du success. Ça fait la même chose en plus propre, mais je suis étonné que cela ne se fasse pas de base sans mention explicite.

Merci en tout cas de m'avoir indiqué le "on()" ! :)

Non. Tu n'as pas compris le rôle des événements délégués !
Le principe est de poser le gestionnaire sur un ancêtre commun et de préciser à quelles balises doit s'appliquer le gestionnaire.
Le but : soit n'avoir à utiliser qu'un seul gestionnaire pour plusieurs éléments, soit pouvoir créer des gestionnaires pour des éléments n'existant pas encore.

Exemple :

Code:

---

$('#conteneur').on('click', 'input', callback);

---

Dans cet exemple, la balise ayant l'id conteneur reçoit un gestionnaire d'événement.
Lorsque cet événement est déclenché, la fonction vérifie si l'élément qui a déclenché l'événement est bien de type <input>, si c'est le cas, alors la fonction callback est exécutée.

Ok. Après avoir tourné un peu en rond pour réaliser la portée de cet "ancêtre commun", je vois que cette solution contourne le problème des éléments nouvellement créés puisqu'il repose sur un gestionnaire d'un élément pérenne.

Je me retrouve donc avec :

Code:

---

1 2 3 4 5 6

$('#listAgenda').on('click', '.prog_etat', reportDateActualisation); $('#listAgenda').on('click', '.prog_etat', saveProgEtat); $('#listAgenda').on('change', '.heuredebut, .heurefin, .report_date', saveInput); $('#listAgenda').on('click', '.duplique', duplicateAgenda); $('#listAgenda').on('click', '.delete', deleteDate);

---

sans avoir à attacher nulle part d'autre (comme les input créés à la volée) d'événement sur mes éléments. Donc c'est parfait, merci beaucoup :D

c'est rationalisable ...

Que veux-tu dire ? Qu'on peut mutualiser ce code pour les deux événement attachés à prog_etat ?

Si il s'agit de ça, c'est un choix volontaire pour avoir un code un peu plus clair.

non pour les evenements aussi

A part regrouper les deux premiers et chainer les suivants, j'avoue que je ne vois pas trop... :koi:

Code:

---

1 2 3 4 5 6 7

$('#listAgenda').on({ 'click': reportDateActualisation, 'click': saveProgEtat }, '.prog_etat', ) .on('change', '.heuredebut, .heurefin, .report_date', saveInput) .on('click', '.duplique', duplicateAgenda) .on('click', '.delete', deleteDate);

---

Exact, merci. Je n'ai pas encore le réflexe du chaînage (bien pratique) à outrance sur jquery.