É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

Créer un <select> avec id , l'ajouter au document et appeler .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 l'affaire vous pouvez cacher la sélection si vous voulez et après .combobox Montrez-le ou utilisez-le pour trouver

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

Answer 2

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

Dans la directive, je compile l'élément pour obtenir l'accès via javascript et j'exécute la commande jquery (comme votre .combobox() commande). Il est très important de supprimer l'attribut. Sinon, cette directive s'appellera elle-même et vous devrez construire 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();
    }
}
});