JQuery "on create" evenement pour les éléments créés dynamiquement

Vous pouvez on l'événement DOMNodeInserted pour obtenir un événement pour quand il est ajouté au document par votre code.

 $('body').on('DOMNodeInserted', 'select', function () { //$(this).combobox(); }); $('<select>').appendTo('body'); $('<select>').appendTo('body'); 

Fiddled ici: http://jsfiddle.net/Codesleuth/qLAB2/3/

EDIT: après avoir lu je dois simplement vérifier que DOMNodeInserted n'entraînera aucun problème sur les navigateurs. Cette question de 2010 suggère que IE ne supporte pas l'événement, alors testez-le si vous le pouvez.

Voir ici: [lien] Avertissement! Le type d'événement DOMNodeInserted est défini dans cette spécification pour référence et exhaustivité, mais cette spécification dévalorise l'utilisation de ce type d'événement.

Vous pouvez utiliser l' DOMNodeInserted mutation DOMNodeInserted (pas de délégation DOMNodeInserted ):

 $('body').on('DOMNodeInserted',function(e){ var target = e.target; //inserted element; }); 

EDIT: Les événements de mutation sont obsolètes , utilisez plutôt un observateur de mutation

Je viens de trouver cette solution qui semble résoudre tous mes problèmes d'ajax.

Pour les événements prêts, j'utilise maintenant ceci:

 function loaded(selector, callback){ //trigger after page load. $(function () { callback($(selector)); }); //trigger after page update eg ajax event or jquery insert. $(document).on('DOMNodeInserted', selector, function () { callback($(this)); }); } loaded('.foo', function(el){ //some action el.css('background', 'black'); }); 

Et pour les événements de déclenchement normaux, je l'utilise maintenant:

 $(document).on('click', '.foo', function () { //some action $(this).css('background', 'pink'); }); 

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 ne sont pas les miennes). Cela fonctionne dans tous les navigateurs qui prennent en charge les animations CSS3: IE10, Firefox 5+, Chrome 3+, Opera 12, Android 2.0+, Safari 4+. Voir la démo du blog. Le hack consiste à utiliser un événement d'animation CSS3 avec un nom donné qui est observé et utilisé dans JavaScript.

Une façon, qui semble fiable (même si elle est testée uniquement dans Firefox et Chrome) est d'utiliser JavaScript pour écouter l'événement animationend (ou son camelCased, et prefixed sibling animationEnd ), et appliquer une durée de vie courte (dans la démo 0.01 seconde) Animation au type d'élément que vous envisagez d'ajouter. Ceci, bien sûr, n'est pas un événement onCreate , mais se rapproche (dans les navigateurs compatibles ) d'un type d'événement onInsertion ; Voici 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éfixé-versions-retiré si 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émo de JS Fiddle .

De toute évidence, le CSS peut être ajusté en fonction du placement des éléments pertinents, ainsi que du sélecteur utilisé dans jQuery (il devrait vraiment être aussi proche du point d'insertion que possible).

Documentation des noms des événements:

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

Les références:

• Caniuse.com Résumé de la compatibilité des animations CSS .
• Interface CSS AnimationEvent (W3C) .
• L' animationend JavaScript fournit un support fournisseur .

Pour moi, la liaison avec le corps ne fonctionne pas. Relier le document en utilisant jQuery.bind () fait.

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

Il existe un plugin, adampietrasiak / jquery.initialize , qui est basé sur MutationObserver qui réalise cela simplement.

 $.initialize(".some-element", function() { $(this).css("color", "blue"); }); 

Créez un <select> avec un identifiant, ajoutez-le au document .. et appelez .combobox

  var dynamicScript='<select id="selectid"><option value="1">...</option>.....</select>' $('body').append(dynamicScript); //append this to the place your wanted. $('#selectid').combobox(); //get the id and add .combobox(); 

Cela devrait faire le tour … vous pouvez cacher le choix si vous voulez et après .combobox montrer … ou utiliser le trouver …

  $(document).find('select').combobox() //though this is not good performancewise 

Si vous utilisez angularjs, vous pouvez écrire votre propre directive. J'ai eu le même problème avec bootstrapSwitch. Je dois appeler $("[name='my-checkbox']").bootstrapSwitch(); En javascript mais mon objet d'entrée html n'a pas été créé à ce moment-là. Donc, j'écris une propre directive et crée l'élément de saisie avec <input type="checkbox" checkbox-switch>

Dans la directive, je compile l'élément pour accéder via javascript et exécute la commande jquery (comme votre commande .combobox() ). Il est très important de supprimer l'attribut. Sinon, cette directive s'appellera elle-même et vous avez construit une boucle

 app.directive("checkboxSwitch", function($compile) { return { link: function($scope, element) { var input = element[0]; input.removeAttribute("checkbox-switch"); var inputCompiled = $compile(input)($scope.$parent); inputCompiled.bootstrapSwitch(); } } });