Événement jQuery "on create" pour les éléments créés dynamiquement

Question

Je dois être capable de créer dynamiquement <select> et le transformer en élément jQuery .combobox() . Il devrait s'agir d'un événement de création d'élément, par opposition à un événement de "clic", auquel cas je pourrais simplement utiliser jQuery. .on() .

Est-ce que quelque chose comme ça existe ?

$(document).on("create", "select", function() {
    $(this).combobox();
}

J'hésite à utiliser livequery, car il est très dépassé.

UPDATE La boîte de sélection/combinaison mentionnée est chargée via ajax dans une colorbox jQuery (fenêtre modale), d'où le problème : je ne peux lancer la combobox qu'en utilisant la colorbox. onComplete Cependant, lors du changement d'une combobox, une autre select/combobox doit être créée dynamiquement. J'ai donc besoin d'un moyen plus générique de détecter la création d'un élément ( select dans ce cas).

UPDATE2 Pour essayer d'expliquer davantage le problème, j'ai select/combobox créés de manière récursive, il y a également beaucoup de code d'initiation à l'intérieur .combobox() donc si j'utilisais une approche classique, comme en La réponse de @bipen mon code gonflerait à des niveaux insensés. J'espère que cela explique mieux le problème.

UPDATE3 Merci à tous, je comprends maintenant que depuis la dépréciation de la fonction DOMNodeInserted il y a un vide dans la mutation des DOM et il n'y a pas de solution à ce problème. Je vais devoir repenser mon application.

Answer 1

Cela pourrait être fait avec DOM4 MutationObservers mais ne fonctionnera que dans Firefox 14+/Chrome 18+ (pour l'instant).

Cependant, il existe un " hack épique "(les mots de l'auteur, pas les miens !) qui fonctionne dans tous les navigateurs qui supportent les animations CSS3 qui sont : IE10, Firefox 5+, Chrome 3+, Opera 12, Android 2.0+, Safari 4+. Voir le Démo du blog. Le principe consiste à utiliser un événement d'animation CSS3 portant un nom donné, qui est observé et traité en JavaScript.

Answer 2

Un moyen, qui semble La solution la plus fiable (bien qu'elle n'ait été testée que sur Firefox et Chrome) consiste à utiliser JavaScript pour écouter le message animationend (ou sa sœur en majuscule et préfixe) animationEnd ), et appliquer une animation de courte durée (0,01 seconde dans la démo) au type d'élément que vous prévoyez d'ajouter. Bien entendu, il ne s'agit pas d'une onCreate mais se rapproche (en conforme navigateurs) et onInsertion type d'événement ; ce qui suit est une preuve de concept :

$(document).on('webkitAnimationEnd animationend MSAnimationEnd oanimationend', function(e){
    var eTarget = e.target;
    console.log(eTarget.tagName.toLowerCase() + ' added to ' + eTarget.parentNode.tagName.toLowerCase());
    $(eTarget).draggable(); // or whatever other method you'd prefer
});

Avec le HTML suivant :

<div class="wrapper">
    <button class="add">add a div element</button>
</div>

Et (abrégé, préfixe-versions supprimé bien que présent dans le Fiddle, ci-dessous) CSS :

/* vendor-prefixed alternatives removed for brevity */
@keyframes added {
    0% {
        color: #fff;
    }
}

div {
    color: #000;
    /* vendor-prefixed properties removed for brevity */
    animation: added 0.01s linear;
    animation-iteration-count: 1;
}

Démonstration de JS Fiddle .

Bien entendu, la feuille de style en cascade peut être adaptée en fonction de l'emplacement des éléments concernés, ainsi que du sélecteur utilisé dans jQuery (il doit être aussi proche que possible du point d'insertion).

Documentation des noms d'événements :

Mozilla   |  animationend
Microsoft |  MSAnimationEnd
Opera     |  oanimationend
Webkit    |  webkitAnimationEnd
W3C       |  animationend

Références :

• Résumé de la compatibilité des animations CSS de caniuse.com .
• Interface CSS AnimationEvent (W3C) .
• JavaScript animationend support du vendeur .

Answer 3

Pour moi, la liaison au corps ne fonctionne pas. La liaison au document à l'aide de jQuery.bind() fonctionne.

$(document).bind('DOMNodeInserted',function(e){
             var target = e.target;
         });

Answer 4

Au lieu de...

$(".class").click( function() {
    // do something
});

Vous pouvez écrire...

$('body').on('click', '.class', function() {
    // do something
});

Answer 5

Je pense qu'il est utile de mentionner que dans certains cas, cela pourrait fonctionner :

$( document ).ajaxComplete(function() {
// Do Stuff
});