使jquery选择的插件与动态添加的下拉列表一起使用

Question

Ok so I have an app that adds a new dropdown element to the dom on click, but because the new dropdown is added after chosen is instantiated $('.dropdowns').chosen() it's not turned into a chosen dropdown.

Is there a better way to make dynamically created dropdowns work without having to re-instantiate jquery version of chosen (ie without having to re-call $('.dropdowns').chosen() )?

Answer 1

you can simply recall chosen plugin after inserting the dynamic dropdown

/*

 code of creating dynamic dropdown

after it add:
*/

$('#ID_OF_DYNAMIC_DROPDOWN').chosen();  

in my case i use:

var i=$('#table_invoice tbody tr').length;
$(".addmore").on('click',function(){
    html = '<tr>';

    html += '<td><select name="item_id[]" id="itemName_'+i+'" class="form-control searchable chosen-rtl">'+ItemOptions+'</select></td>';

    html += '</tr>';

    $('#table_invoice').append(html);
    $('#itemName_'+i).chosen(); 
    i++;
});