使用clone()方法后Select2组件失效，已尝试select2('destroy')仍未解决

看起来你已经找对了方向——确实需要用select2('destroy')来处理克隆前的Select2实例，但问题出在销毁和初始化的时机、克隆方式以及全局初始化的细节上。我帮你梳理下具体的修复步骤和代码调整：

核心问题分析 #

当你用clone(true)克隆元素时，会把原元素上绑定的所有事件（包括Select2自动绑定的事件）一起复制，但Select2会在原元素外生成额外的DOM结构（比如下拉框的容器），这些动态生成的内容并没有被正确克隆，反而会导致新元素的Select2实例和原实例冲突。同时你最后全局初始化所有select的操作，会重复初始化已经正常工作的Select2元素，也可能引发异常。

具体修复步骤 #

1. 调整克隆前的销毁与克隆方式 #

• 先销毁原元素的Select2实例，避免克隆无效的事件和DOM
• 克隆时不要克隆事件（去掉clone(true)的true参数，用默认的clone()即可），因为我们之后会重新初始化新元素的Select2，事件委托可以处理动态元素的交互

2. 单独初始化新克隆元素的Select2 #

不要全局初始化所有select，只针对新克隆的元素进行初始化，避免影响已有的正常实例

3. 修复后的完整代码示例 #

jQuery(document).ready(function($) {
    // 抽离Select2配置，避免重复代码
    const select2Config = {
        width: '100%',
        language: {
            noResults: function (params) {
                return 'Não encontramos sua localização. Por favor, tente novamente ou selecione a localidade mais próxima.';
            }
        }
    };

    // 初始化原元素的Select2
    $('.consultorio').find('select').select2(select2Config);

    var max_fields = 10;
    var wrapper = $(".consultorios");
    var item = $("#consultorio");
    var add_button = $("#add_consultorio");
    var x = 1;
    $('.num-clinic').html(x);

    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            // 1. 先销毁原元素的Select2，避免克隆冲突
            $(item).find('select').select2('destroy');
            
            // 2. 克隆元素，不要克隆事件（使用默认clone()即可）
            var new_item = $(item).clone().appendTo(wrapper);
            
            // 3. 清空新元素的表单值、修改ID等属性
            new_item.find('input,select').val('');
            new_item.attr('id', `${new_item.attr('id')}_${x}` );
            new_item.find('.num-clinic').html(x);
            new_item.find('input,select').each(function(){
                $(this).attr('id', `${$(this).attr('id')}_${x}` );
            });

            // 4. 重新初始化原元素的Select2
            $(item).find('select').select2(select2Config);

            // 5. 单独初始化新克隆元素的Select2
            new_item.find('select').select2(select2Config);
        }
    });

    // 动态元素的移除事件，保持事件委托的正确写法
    $(wrapper).on("click",".remove_field", function(e){
        e.preventDefault();
        // 移除前销毁当前元素的Select2，避免内存泄漏
        $(this).closest('.consultorio').find('select').select2('destroy');
        $(this).closest('.consultorio').remove();
        x--;
        // 可选：更新剩余元素的序号
        $('.num-clinic').each(function(index){
            $(this).html(index+1);
        });
    });
});

额外注意事项 #

• 移除动态添加的元素时，一定要先调用select2('destroy')，避免残留的Select2实例造成内存泄漏
• 如果你需要保留原元素的自定义事件，可以保留clone(true)，但要确保这些事件和Select2的事件逻辑不冲突，或者在克隆后重新绑定必要的事件
• 把Select2的配置抽成变量，不仅能减少重复代码，还方便后续统一修改配置

内容的提问来源于stack exchange，提问作者wilfrank