javascript - Select2 动态元素不响应事件

Question

我正在使用Select2，效果很好。但是，我正在使用下面的代码来创建新的动态 select2 下拉菜单，但是在单击它们时它们没有反应/打开。

var relationshipcounter = 0;

$('#AddMoreRelationships').click(function () {
    var $relationship = $('.relationship'); // div containing select2 dropdown
    var $clone = $relationship.eq(0).clone();
    $clone[0].id = 'id_' + ++relationshipcounter;
    $relationship.eq(-1).after($clone);

    $relationship.find('select').trigger('change'); // not working
});

截屏：

JSFIDDLE：

http://jsfiddle.net/pHSdP/133/

Answer 1

我遇到了这个确切的问题，当然，我尝试的第一件事是包含数据的深层副本：

el.clone(true,true);

这没有用。相反，我发现的最好方法是：

el=other_el.clone()_etc; // cloning the old row
el.find('.select2-container').remove();
el.find('select').select2({width: 268});

el在这两个片段中都是div包含 theselect和所以 Select2 元素的行。

基本上我在第二个片段中所做的是删除“旧”select2，它将始终具有类，.select2-container然后select在我的新行中的所有找到的元素上重新创建它。

Answer 2

您还需要使用参数调用clone以true复制事件和数据。否则只有元素被克隆，而不是绑定到它的事件。

$relationship.eq(0).clone(true);

文档：http ://api.jquery.com/clone/

Answer 3

好的，问题解决了，小提琴：

http://jsfiddle.net/WrSxV/1/

// add another select2
var counter = 0;
$('#addmore').click(function(){
    var $relationship = $('.relationship');
    var $clone = $("#RelationshipType").clone();
    $clone[0].id = 'id_' + ++counter;
    $clone.show();
    $relationship.eq(-1).after($clone);
    $clone.select2({ "width" : "200px" });// convert normal select to select2

    //$('body').select2().on('change', 'select', function(){
      //  alert(this.id);
    //}).trigger('change');

    return false;
});

Answer 4

用于.on将动态插入的元素绑定到事件，例如

$('body').on('click','#AddMoreRelationships',function () {
});

Answer 5

克隆对象后，您必须为 em 重新分配事件：

var $clone = $relationship.eq(0).clone();
$clone.on("click", function_name);