jQuery .on() "append"

Question

Так что я знаю о функции .on() jQuery, чтобы давать обработчики событий динамически добавленного элемента.

Например, я использовал это так

$(document).on("change",Items,function(){/*Code here*/}); 

Но есть способ, чтобы использовать эту .Ну() функцию (или что-то еще), чтобы вызвать функцию когда объект был прилагаемой в документ ? Я спрашиваю, потому что я использую JQuery плагин называется Избранным, который создает более полей выбора, и она работает с использованием линии

$(selector).chosen(); 

Однако эта линия не работает, если он используется, прежде чем элемент добавляется в документ, и для чистоты моего кода было бы неплохо, если бы я мог вызвать функцию для запуска этой строки, когда элемент был добавлен, вместо добавления этой строки после добавления элемента.

Редактировать: Проблема не в том, что я не могу использовать .chosen() после добавления элемента. Потому что я могу! Я просто хочу, чтобы мой код был лучше организован, так как строка $ (селектор) .chosen() была скрыта полностью в нижней части моего кода незаметно.

Мой код:

//Create the dropdown box for the items 
var Items = document.createElement("select"); 
$(Items).attr({"id":"Items"}); 

$(document).on("change",Items, 
    function(){ 
     updateHolder(true); 
     $(InfoBox).trigger("chosen:updated"); 
     setTimeout(
      function(){ 
       $(Items).data('chosen').input_blur(); 
      }, 100 
     ); 
    } 
); 

//Add items from ED.listOfItems to HTML Items dropdown box 
for(var it in ED.listOfItems){ 
    var iKey = ED.listOfItems[it]; 
    var itemOption = document.createElement("option"); 
    if(!Array.isArray(iKey)){ 
     $(itemOption).val(iKey); 
     $(itemOption).html(iKey.split("_")[0]); 
    } 
    else{ 
     $(itemOption).val(iKey[0]); 
     $(itemOption).html(iKey[1]); 

    } 
    $(Items).append(itemOption); 
} 

/*******Set default to spawn*******/ 
/**/ ED.objectType = "Spawn"; /**/ 
/**/ ED.infoType = "";   /**/ 
/**/ $(Items).val("Spawn");  /**/ 
/**********************************/ 


$(MenuBar).append(Items); 

$(Items).chosen({disable_search_threshold: 100}); 
$("#Items_chosen").css({"width":"100px","position":"absolute","left":"5px","top":"20px"}); 

Как вы можете видеть, второй в последней строке выбранной линии, но это только кажется, что в нелогичной место для меня. Я очень OCD с моим кодом: P

Answer 1

Я только что нашел ответ, который мне нужен по другому вопросу, но он никогда не принимался. Ответ Марио Bellart, Fire OnAppend event for jQuery element when it gets appended to the DOM

Как я адаптировал свой код

//Create the dropdown box for the items 
var Items = document.createElement("select"); 
$(Items).attr({"id":"Items"}); 

$(document).on("append", Items, 
    function(){ 
     $(Items).chosen({disable_search_threshold: 100}); 
     $("#Items_chosen").css({"width":"100px","position":"absolute","left":"5px","top":"20px"}); 
    } 
); 

$(document).on("change",Items, 
    function(){ 
     updateHolder(true); 
     $(InfoBox).trigger("chosen:updated"); 
     setTimeout(
      function(){ 
       $(Items).data('chosen').input_blur(); 
      }, 100 
     ); 
    } 
); 

//Add items from ED.listOfItems to HTML Items dropdown box 
for(var it in ED.listOfItems){ 
    var iKey = ED.listOfItems[it]; 
    var itemOption = document.createElement("option"); 
    if(!Array.isArray(iKey)){ 
     $(itemOption).val(iKey); 
     $(itemOption).html(iKey.split("_")[0]); 
    } 
    else{ 
     $(itemOption).val(iKey[0]); 
     $(itemOption).html(iKey[1]); 

    } 
    $(Items).append(itemOption); 
} 

/*******Set default to spawn*******/ 
/**/ ED.objectType = "Spawn"; /**/ 
/**/ ED.infoType = "";   /**/ 
/**/ $(Items).val("Spawn");  /**/ 
/**********************************/ 

$(MenuBar).append(Items).trigger("append"); 

Я не знал о .trigger() и создания пользовательских событий. Может быть, я должен еще немного почитать.

Answer 2

Может быть, есть лучший способ, но я обычно добавляю класс как «to_replace» для вновь создаваемых элементов, а затем использовать:

$(".to_replace").each(function() { 
    $(this).removeClass("to_replace").choosen(); 
}) 

каждый раз, когда я изменил что-нибудь.

Answer 3

document не запускает событие change. (Edit ОП делегирование change)

Если вы не можете вручную связать .chosen() после вас append, то вы можете захотеть взглянуть на MutationObserver, хотя поддержка браузера довольно кровоточащие края.

Answer 4

Вы можете использовать плагин livequery https://github.com/brandonaaron/livequery, лучшим решением было бы абсолютно https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Events/Mutation_events, но поддержка браузера очень плохая.

Answer 5

У меня возникла проблема добавления класса к элементу, который я создал и добавил, поскольку этот класс имеет переход, css-переходы не работают, если элемент не находится в дереве DOM, все решения, которые я пробовал, «т работа для меня, так что я закончил с этим обходным:

elementParent.append(elementToAdd); 
    setTimeout(() => { 
    $(elementToAdd).addClass("show"); 
    }, 0); 

таким образом, класс будет добавлен только после того, как элемент был добавлен в DOM.