Select2对事件没有反应的动态元素

我正在使用Select2，这很好用。不过，我正在使用下面的代码来创建新的动态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 
});

截图：

enter image description here

的jsfiddle：

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

来源

2013-02-28 Dev01

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

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; 
});

来源

2013-03-01 10:49:37 Dev01

你需要调用clone与true参数警察y关于事件和数据。否则，只有元素被克隆，而不是绑定到它的事件。

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

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

来源

2013-02-28 13:48:20 techfoobar

谢谢，但它打开了第一个两个/原来的不是克隆的下拉菜单的下拉菜单：（ – Dev01 2013-02-28 13:50:02

@ Dev01然后发布'change'事件处理程序。我们无法弄清楚你的代码的问题没有看到所有的 – 2013-02-28 13:50:34

是的，尝试使用'.clone（true）'而不是'.clone（）' - 这应该可以解决它 – techfoobar 2013-02-28 13:50:46

使用.on绑定动态插入元素的事件，如

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

来源

2013-02-28 13:48:47 Deadlock

.live（）已过时 – Sergio 2013-02-28 13:50:01

更改为。on @Sergio – Deadlock 2013-02-28 13:51:38

您现在已经拥有了正确的功能，但是您的语法错误;这是一个静态事件处理程序，它不会对动态添加的元素做出反应。 – 2013-02-28 13:51:56

克隆的对象后，你必须为EM重新分配事件：

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

来源

2013-02-28 13:51:19 Sergio

我有这个确切的问题，当然，我想的第一件事是深拷贝数据：

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行包含select等等选择二元素。

本质上，我在第二个片段中删除的是旧的select2，它总是有.select2-container的类，然后在我的新行中的所有发现的select元素上重新创建它。

来源

2013-04-17 14:03:56 Sammaye

Select2对事件没有反应的动态元素

回答

相关问题