Плагин jQuery не работает - он добавлен

Question

Im appending (или дублирование другими словами) a <form> который включает выпадающий список - все мои выпадающие списки используют Chosen jQuery plugin.

ПРОБЛЕМА: раскрывающееся меню приложенной формы не работает!

Как заставить его работать, когда он прилагается?

Очевидно, проблема заключается в том, что сценарий jQuery не привязан к новому/добавленному раскрывающемуся списку, потому что HTML 100% такой же, но как это сделать?

---

<form class="my-form"> 
    <div class="new-item row"> 
    <select name="transport-type[]"> 
     <option value=""><?php _e('Type', 'tt'); ?></option> 
     <option value="coach"><?php _e('Coach', 'tt'); ?></option> 
     <option value="diesel-train"><?php _e('Diesel Train', 'tt'); ?></option> 
     <option value="electric-train"><?php _e('Electric Train', 'tt'); ?></option> 
     <option value="trolley"><?php _e('Trolley', 'tt'); ?></option> 
     <option value="tram"><?php _e('Tram', 'tt'); ?></option> 
     <option value="city-bus"><?php _e('City Bus', 'tt'); ?></option> 
     <option value="shuttle"><?php _e('Shuttle', 'tt'); ?></option> 
    </select> 
    </div> 
</form> 

<div class="clearfix"> 
    <a class="add-new btn"><?php _e('Add New','tt'); ?></a> 
</div> 



<?php 

//All JS is on different file & is included before HTML 

//Fires up/"attaches" Chosen.js to select 
jQuery('select').chosen({ 
    disable_search: false, 
    disable_search_threshold: 10, 
    width: '100%' 
}); 

//Add new 
jQuery(document).on('click', '.add-new', function() { 
    newGroup = jQuery('.new-item').html(); 
    jQuery('.my-form').append('<div class="new-item row">'+newGroup+'</div>'); 
}); 

Answer 1

Вы должны захватить HTML .new-item «s, прежде чем он преобразуется выбран.

Попробуйте это:

//Fires up/"attaches" Chosen.js to select 
var newGroup = jQuery('.new-item:first').html(); 
jQuery('select').chosen({ 
    disable_search: false, 
    disable_search_threshold: 10, 
    width: '100%' 
}); 

//Add new 
var group_id = 0; 
jQuery(document).on('click', '.add-new', function() { 
    group_id++; 
    jQuery('.my-form').append('<div class="new-item row" id="group_' + group_id + '" >'+newGroup+'</div>'); 
    jQuery('#group_' + group_id + ' select').chosen({ 
     disable_search: false, 
     disable_search_threshold: 10, 
     width: '100%' 
    }); 
}); 

Fiddle:http://jsfiddle.net/trex005/qfvhyg4y/

Answer 2

переместить свой скрипт в конец вашего HTML кода или поместить скрипт в document.ready

$(document).ready(function() { 
     $('select').chosen({ 
       disable_search: false, 
       disable_search_threshold: 10, 
       width: '100%' 
     }); 
});