克隆后的select2组件点击无响应，该如何排查修复？

• JS加载顺序错误：修改后的代码中，调用select2相关方法的代码写在了select2库引入之前，导致select2方法未定义，点击事件直接报错不执行。
• 直接克隆了select2渲染后的DOM：页面加载完成后原始select已经被select2替换成了自定义的DOM结构，直接克隆整个行得到的不是原生select元素，无法绑定select2事件。
• ID重复冲突：原始的select、input都设置了固定id，克隆后多个相同id会导致DOM选择和事件绑定异常，提交表单时同名name也会导致参数覆盖。
• 克隆逻辑错误：修改后的代码只克隆了select元素且追加到了原始行内部，没有生成新的表单行，不符合需求。

首先调整JS加载顺序，所有select2相关调用必须放在select2库引入之后，完整修正代码如下：

HTML部分 #

<div class="card-body" id="wrapper-form">
    <div class="mb-1">
        <button class="btn btn-success" type="submit">Add</button>
        <input class="btn btn-info" type="button" id="clone" value="New Item" />
    </div>
    <!-- 原始表单行 -->
    <div class="form-row form-clone-item">
        <div class="form-group col">
            <select name="master_item_id[]" class="form-control select2-item">
                <option></option>
            </select>
        </div>
        <div class="form-group col-3">
            <input name="quantity[]" type="text" class="form-control @error('quantity')" placeholder="Quantity">
        </div>
    </div>
</div>

JS部分 #

<!-- 确保jQuery引入在最前，之后引入select2库 -->
<script src="{{ asset('select2-bootstrap4/dist/js/select2.min.js') }}"></script>
<script>
$(function () {
    // 初始化所有原始select2
    initSelect2();

    // 克隆按钮点击事件
    $("#clone").click(function() {
        // 取第一个表单行作为模板
        let $template = $(".form-clone-item").first();
        // 先销毁模板的select2，避免克隆渲染后的结构
        $template.find('.select2-item').select2('destroy');
        // 克隆新行，清除选中值
        let $newRow = $template.clone();
        $newRow.find('select').val('');
        $newRow.find('input').val('');
        // 把新行追加到容器
        $("#wrapper-form").append($newRow);
        // 重新初始化所有select2
        initSelect2();
    });

    // 封装select2初始化方法
    function initSelect2() {
        $('.select2-item').each(function () {
            $(this).select2({
                theme: 'bootstrap4',
                placeholder: "Item",
                allowClear: true,
            });
        });
    }
});
</script>

优化说明 #

• 把固定id替换为class，name设置为数组格式，避免重复冲突，表单提交时可以直接拿到所有行的参数。
• 封装select2初始化方法，克隆后统一调用，避免重复写配置。
• 克隆前先销毁模板的select2实例，保证克隆的是原生select结构，再统一初始化，保证新老行都能正常使用。

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