Détecter la création d'un nouvel élément de classe

Bonjour,
J'ai parcouru le forum (et la doc officielle) et je ne trouve pas la solution à mon problème:
J'ai une certaine classe (appellée "diapo"), qui gère les diaporamas de mon site. Au premier chargement de la page, j'ai un

Code:

---

document.ready

---

qui lance un

Code:

---

diaporama.each

---

. Ainsi, tous mes diaporamas sont initialisés correctement après le chargement de la page. Cette initialisation exécute plusieurs fonctions qui ne sont pas très utiles ici (réglages de CSS, de clicks, de modifications du DOM, etc.).

Au fur et à mesure de la navigation, d'autres diaporamas sont créés, mais non initialisés (forcément, le document.ready ne s'éxécute qu'une fois). Mon but est que dès qu'un nouvel élément

Code:

---

div class="diapo"

---

apparaît dans la page, l'initialisation de ce diaporama s'exécute.

J'ai tout d'abord cherché dans la fonction "live", puis j'ai vu qu'elle était devenue obsolète et qu'il fallait lui préférer "on". Cependant, "on"
demande un "event" dans son appel, mais moi je n'ai pas d'event particulier ("click", etc.). Existe-t-il un event qui pourrait détecter la création d'un nouvel objet d'une classe?

Merci d'avance ;)

comment sont ajoutés les diaporamas ? tu n'a pas une fonction qui fait ça ? dans ce cas tu as juste à executer la même fonction sur ces éléments que sur ceux manipulés dès l'intialisation

Oui, la solution de v1cent est la bonne.
Tu dois externaliser le code exécuté dans le .each() dans une fonction et l'appeler comme tu le fais au démarrage et ensuite sur les nouveaux éléments créés.

Merci à vous deux pour vos réponses.
Cependant, je n'ai pas l'impression que ça résolve mon problème:
- je peux externaliser mon code du each en faisant un callback, du genre (ce n'est pas le code exact mais l'esprit, je tiens à préciser).

Code:

---

var callback = function (diap) {...}

---

puis

Citation:

---

diapo.each(function(callback(this)))

---

Le problème c'est: comment savoir quand lancer la fonction "callback" dès lors qu'un nouvel élément de classe "diapo" arrive dans le dom?
Je pense que la piste du "on" est intéressante: n'existe-t-il pas un moyen de faire une sorte de

Code:

---

diapo.on(create, callback)

---

tu as deux solutions :
* soit tu fait cette fonction, puis tu l'appelle après avoir modifié la classe (je suppose qu'il y a bien quelque chose qui modifie la classe ? ça tombe pas du ciel quand même ! :D )
* soit tu fait avec on comme tu le souhaite, sauf qu'il n'y a pas d'évènements correspondant, donc il faudrait :

- réécrire les fonctions de modification de classe de jquery pour lancer un évènement (classchange par exemple)
- à tous les changements de classe si l'élément possède bien la classe dont tu as besoin, tu regarde si la fonction a déjà été créée par le passé (donc il faut quelque chose pour le savoir, par exemple un attribut data si ton plugin jquery ne gère pas)
- si c'est pas le cas, tu appelle la fameuse fonction

Et ça ne prendra pas en compte les cas de figure ou la classe change sans passer par jQuery, et ça risque de poser plein de souci (s'amuser à modifier le noyau de jQuery c'est pas une super super idée)

bref, tu ferais mieux de créer une fonction qui modifie la classe et initialise le diaporama dans la foulée et pas comme tu envisage ce qui serait plein d'inconvénients

Mmmm.. Je ne comprends pas trop ce que tu veux dire! :)
En fait la diapo ne tombe pas du ciel (pas encore, j'ai pas trouvé la fonction pour ça!), mais quand on effectue certaines opérations, elle est chargée à l'aide d'un "load" (une grosse DIV qui est chargée dans une div existante). Elle ne se trouve donc pas dans le DOM chargé initialement, d'où mon intérêt pour le "on", qui apparemment, si je lis bien la doc, répercute la fonction handler aux futurs éléments du DOM.

Ceci dit je suis intrigué par ta première solution: qu'entends-tu par appeler une fonction une fois qu'une classe est modifiée? Il existerait un événement qui détecterait la fin de modification?

Bon, j'ai trouvé une solution, mais je n'en suis pas satisfait car elle n'est pas optimale:
http://help.dottoro.com/ljmcxjla.php

Vous trouverez sur ce lien le DOMNodeInsterted qui m'a aidé; ceci dit, je suis obligé de vérifier chaque élément du DOM du document quand in est inséré, et appliquer la fonction si la classe correspond à celle que je cherche.

C'est une sorte de "each" associé à un "on" si on le manipule bien, mais je suis sûr qu'il existe une manière plus rapide de fonctionner, et surtout plus native du jquery.

Je ne mets donc pas le tag "résolu", puisqu'il s'agit de bidouille.
Je reste donc preneur de toute solution!

Citation:

---

mais quand on effectue certaines opérations, elle est chargée à l'aide d'un "load"

---

c'est donc dans ton load que tu doit appeller la fonction qui initialisera le diaporama, juste après l'avoir ajouté

En fait j'ai déjà fait un système avec un promise() et de when(load), mais quand je rafraichis ma page parfois ça marche, parfois ça ne marche pas (il semblerait qu'il y ait des bugs...), c'est pour ça qu'en vérifiant si vraiment la classe que je veux apparait, je suis sûr d'initialiser tout ce qu'il faut!

Bonsoir

@v1cent pense certainement à la fonction de rappel de la méthode load().

On peut alors initialiser le contenu du nouveau fragment du DOM dans cette fonction de rappel.

Ici un exemple qui vous montre comment créer et utiliser un événement personnel. Voir aussi : Utilisez les événements !

Code:

---

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

/*  * gestionnaire d'événement "ajoutMaDivEvent"  */ $( "#containerID" ).on( "ajoutMaDivEvent", "#divID", function( event ){ // code d'initialisation du contenu de l'élément d'ID "divID"   // debug console, touche F12 console.log( this, event ); });   /*  * Chargement de la nouvelle sivision. * Création et envoi de l'événement "ajoutMaDivEvent"  */ $( "#containerID" ).load( "dvp3.html #divID", function(){ var monEvent = $.Event( "ajoutMaDivEvent" ); $( "#divID").trigger( monEvent ); });

---

Bonjour,

C'est effectivement une excellente solution, qui a l'air de ne plus subir le bug que j'avais avant avec le when: le load charge plusieurs choses et suivant l'ordre de chargement, la div que je voulais était chargée après la fonction d'initialisation (je m'en suis aperçu dans la console... assez étrange).

Cependant, cette solution implique de préciser à chaque chargement (load) qu'il faut déclencher (trigger) la div en question (je parle de cette ligne:

Code:

---

$( "#divID").trigger( monEvent );

---

)

Donc ta solution fonctionne, mais ce que je cherche à faire, c'est de ne pas avoir à préciser dans mes chargements (qui s'effectueront au fil de la navigation) qu'il faut initialiser la div. Je vais préciser ma pensée: dans le cadre d'un développement collaboratif (j'aimerais que mon projet prenne de l'envergure), je souhaiterais dire à mes copains: "tiens, tu peux créer des fonctions qui créent des diaporamas dans la page à n'importe quel moment, il te suffit de mettre la classe 'diapo', et ça se fera tout seul".

Ainsi, si un gars développe un album photo, il n'a qu'à faire un diapo.appendTo(mapage), et le diaporama en question s'initialisera tout seul.

Je vais mettre le tag résolu car ma solution avec DOMNodeInsterted fonctionne à merveille, et j'ai l'impression qu'il n'existe pas encore de solution native jquery: le "on" requiert un événement, mais pour moi l'événement en soi est la création de la div, que je ne veux pas préciser puisqu'il est déjà dans le "on"!

Merci à tous de votre aide, j'ai pu découvrir encore deux ou trois choses grâce à vous ;)