jQuery 下拉列表在 append 时不起作用

Question

我正在 append 一个表单，它包含 select - 我正在使用 jQuery 选择插件 Chosen .

正如预期的那样，jQuery 选择下拉列表不起作用(因为它是 append 的并且 jQuery 不会自动 append ，对吧？)。

<小时/>

我已经尝试过:

• jQuery('#color').chosen().trigger("chosen:updated"); 但看起来仅当您动态添加更多选项时它才有用，似乎没有针对这种情况的内置选择功能。 结果:完全不执行任何操作。

• 在 jQuery append 函数 下添加了选择的 jQuery 代码。 结果: 它将 Chosen append 到 select 两次，第一次是“原始”，不起作用，第二次有效(如果有 2 个相同的渲染下拉列表和一个，则不是很有用)不起作用)..

   jQuery('.add-color').click(function() {
        colorGroup = jQuery('.color-item').html();
        jQuery('#color').append('<div class="color-item row">'+colorGroup+'</div>');
  
            jQuery('select').chosen({
                disable_search: false,
                disable_search_threshold: 5,
                width: '100%'
             });
   });
  

• 还尝试将Chosen jQuery code与on()结合起来 - 它没有成功并生成错误，我可能做错了什么。 结果:错误!

   // Tried something like this
   jQuery(document).on('chosen', 'select', function({
       disable_search: false,
       disable_search_threshold: 10,
       width: '100%'
   });
  
   // Like you can see, it doesn't work out very well & Im not that 
   // good yet to combine these two - function works differently than Chosen
  

<小时/>

问题:如果 append 或动态加载，如何使 Chosen 工作？

<小时/>

jQuery append 功能:

jQuery('.add-color').click(function() {
    colorGroup = jQuery('.color-item').html();
    jQuery('#color').append('<div class="color-item row">'+colorGroup+'</div>');
});

在页面加载时选择 jQuery:

jQuery('select').chosen({
   disable_search: false,
   disable_search_threshold: 5,
   width: '100%'
});

HTML:

    <div id="color">
        <div class="color-item row">
            <div class="form-group col-sm-4">
                <select name="color-type[]">
                    <option value=""><?php _e('Color', 'tt'); ?></option>
                    <option value="1"><?php _e('Red', 'tt'); ?></option>
                    <option value="2"><?php _e('Blue', 'tt'); ?></option>
                    <option value="3"><?php _e('Black', 'tt'); ?></option>
                    <option value="4"><?php _e('White', 'tt'); ?></option>
                    <option value="5"><?php _e('Yellow', 'tt'); ?></option>
                    <option value="6"><?php _e('Pink', 'tt'); ?></option>
                    <option value="7"><?php _e('Green', 'tt'); ?></option>
                </select>
            </div>

            <div class="form-group col-sm-4">
            <input type="text" name="color-name[]" id="color-name" class="form-control"/>
            </div>

            <div class="form-group col-sm-4">
            <input type="number" name="color-code[]" id="color-code" class="form-control"/>
            </div>         
        </div>

        <div class="clearfix col-sm-12">
            <a class="add-color btn"><?php _e( 'Add Color','tt' ); ?></a>
        </div>

    </div>

Answer 1

首先绑定(bind)每次点击的文档

jQuery(document).on('click','.add-color',function() {