jQuery 附加时下拉菜单不起作用

Question

我正在附加一个表格，它包含 select - 我正在使用 jQuery select 插件 Chosen.

正如预期的那样，jQuery 选中的下拉列表不起作用（因为它是附加的并且 jQuery 不会自动附加，对吗？）。

我试过了：

jQuery('#color').chosen().trigger("chosen:updated"); 不过好像它只有在动态添加更多 options 时才有用，似乎没有针对这种情况的内置 Chosen 功能。 结果： 什么都不做。

在 jQuery append function 下添加了 Chosen jQuery code。 结果： 它将 Chosen 附加到 select 2 次，第一次是 "original"，它不起作用，第二次起作用（如果有 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

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

jQuery 追加函数：

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

首先绑定每次点击的文档

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

jQuery 附加时下拉菜单不起作用

jQuery dropdown not working when appended

jquery

append

jquery-chosen