动态添加字段中Select2无法点击的问题求助（基于jquery.multifield）

嘿，我明白你遇到的问题了——页面加载时初始的Select2下拉框能用，但点击添加按钮生成的新字段里的下拉框完全没反应对吧？这其实是个很常见的动态元素初始化问题，我来帮你搞定它。

问题根源 #

你在页面就绪时只对已经存在的.js-example-basic-single元素调用了select2()初始化，但通过jquery.multifield.js动态克隆出来的新<select>元素，根本没被执行这个初始化操作。所以这些新下拉框还是原生的，自然没有Select2的交互功能。

两种可行的解决方案 #

方案1：修改插件源码（最直接高效） #

我们可以在jquery.multifield.js的cloneSection方法里，添加一行代码，确保新克隆的字段里的Select2被初始化。

找到插件里的cloneSection函数，在this.$elem.append(newChild);这行之后，加上初始化Select2的代码：

// 初始化新字段中的Select2组件
newChild.find('.js-example-basic-single').select2({
    placeholder: 'Choose Medicine'
});

修改后的这段代码片段会变成这样：

// Append new section
this.$elem.append(newChild);

// 新增：给刚添加的字段初始化Select2
newChild.find('.js-example-basic-single').select2({
    placeholder: 'Choose Medicine'
});

// Show 'remove' button
$(this.config.btnRemove, this.$elem).show();

这样每次克隆新字段后，都会自动给里面的下拉框初始化Select2，完美解决问题。

方案2：在主代码中监听元素添加（无需修改插件） #

如果你不想改动插件源码，可以用jQuery的DOM监听事件，检测新字段被添加后再初始化Select2。先把初始化逻辑封装成一个函数，再监听元素插入：

$(document).ready(function() {
    // 封装Select2初始化函数，方便重复调用
    function initMedicineSelect(elem) {
        $(elem).select2({
            placeholder: 'Choose Medicine'
        });
    }

    // 初始化页面上已有的下拉框
    initMedicineSelect('.js-example-basic-single');

    // 初始化动态字段插件
    $('.form-content').multifield({
        section: '.group',
        btnAdd:'#btnAdd',
        btnRemove:'.btnRemove',
    });

    // 监听.form-content里新增的.group元素，初始化里面的Select2
    $('.form-content').on('DOMNodeInserted', '.group', function() {
        initMedicineSelect($(this).find('.js-example-basic-single'));
    });
});

不过要注意，DOMNodeInserted事件在性能上略逊于直接在插件里处理，所以如果可以的话，方案1是更好的选择。

验证效果 #

修改完成后，刷新页面试试点击添加按钮，新生成的下拉框应该就能正常唤起Select2的选择界面了。记得确认新克隆的<select>元素和原来的一样，带有.js-example-basic-single这个类名哦。

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