javascript - 从追加中选择2不起作用

Question

我正在使用来自http://ivaynberg.github.io/select2/的 select2 插件。

我有一个表格，可以在其中添加新行。我所做的是从上一行获取 html 并将其附加到我的表单中。

所以这行得通，并且 select2 也被添加到新行中。问题是当我单击选择 2 元素时，什么也没发生。

有没有办法解决这个问题？

Answer 1

它无法按照您的方式工作的原因是复制 HTML 不会复制任何事件处理程序或其他 select2 功能。

为此，正如评论中提到的，我们需要首先销毁原始 select2，克隆其 DOM 元素，然后重新初始化原始 select2，然后初始化副本。

将初始化分解为辅助函数可能更容易，如下所示：

$(document).ready(function() {        

    var $selectParent = $('#select-parent'),
        $copy;

    init($selectParent);

    $("#duplicate").click(function() {

        $selectParent.select2('destroy');

        var $copy = $selectParent.clone();
        $(".form").append($copy);

        init($selectParent);
        init($copy);

    });
});

function init($elem) {
    $elem.select2({
        minimumResultsForSearch: -1,
        width: 'resolve'
    });   
}

检查这个JSFiddle