Jquery - bir tablo satırı klonlarken select2 açılır kapanır

Question

Dört select2 açılan listesi içeren bir tablom var. Satırını çoğaltmak için klonladığımda, yeni satırın açılır listeleri devre dışı bırakıldı, üzerlerine tıklayamıyorum, bunları etkinleştirmek için koduma ne eklemek zorundayım.

HTML tablosu:

<table id="fla_inf" width="100%"> 
<tbody> 
<tr> 
<th class="tab_header" colspan="6">Flavors and Additives</th> 
</tr> 
<tr> 
<th class="tab_header_nam">Flavor Brand</th> 
<th class="tab_header_nam">Flavor Name</th> 
<th class="tab_header_nam">Dropper type</th> 
<th class="tab_header_nam">Quantity Unit</th> 
<th class="tab_header_nam">Quantity</th> 
<th class="tab_header_nam">Add/Remove row</th> 
</tr> 
<tr class="flavors"> 
<td>[brand_list]</td> 
<td><select id="arome0" class="select2-select"></select></td> 
<td><select id="dropper0" class="select2-select"> 
<option selected="selected" value="type1">type 1</option> 
<option value="type2">type 2-3</option> 
</select></td> 
<td><select id="qtyunit0" class="select2-select"> 
<option value="ml">ml</option> 
<option value="drops">drops</option> 
<option selected="selected" value="perc">%</option> 
</select></td> 
<td><input id="quantity0" class="quantity" type="number" /></td> 
<td><input class="addline" src="http://example.org/wp-content/uploads/2015/01/add.png" type="image" /><input class="remline" src="http://example.org/wp-content/uploads/2015/01/delete.png" type="image" /></td> 
</tr> 
</tbody> 
</table> 

ve jquery kodu:

// Add row to the table by cloning existing row 
$(document).on('click', '.addline', function(){ 

    var $tr = $(this).closest('tr'); 
    var allTrs = $tr.closest('table').find('tr'); 
    var lastTr = allTrs[allTrs.length-1]; 
    var $clone = $(lastTr).clone(); 
    $clone.find('td').each(function(){ 
     var el = $(this).find(':first-child'); 
     var id = el.attr('id') || null; 
     if(id) { 
      var i = id.substr(id.length-1); 
      var prefix = id.substr(0, (id.length-1)); 
      el.attr('id', prefix+(+i+1)); 
      el.attr('name', prefix+(+i+1)); 
     } 
    }); 
    $tr.closest('tbody').append($clone); 
}); 

Answer 1

Sebepsiz bu tür klonlama elemanları kaçınmaya çalışın. Klonlamaya bir alternatif, html için bir şablon kullanmaktır.

Klonlamaya devam etmek istiyorsanız, kopyalanmadan önce orijinal satırda Select2 denetimlerini kaldırabilir ve sonradan yeniden kullanabilirsiniz.

Select2 denetimlerini, .select2('destroy') işlevini kullanarak enstrümanın. Cevabı konum için

$(document).on('click', '.addline', function() { 
    var $tr = $(this).closest('tr'); 
    var $lastTr = $tr.closest('table').find('tr:last'); 

    $lastTr.find('.select2-select').select2('destroy'); // Un-instrument original row 

    var $clone = $lastTr.clone(); // Clone row 

    $clone.find('td').each(function() { // Alter cloned ids 
     // ... 
    }); 

    $tr.closest('tbody').append($clone); // Append clone 

    $lastTr.find('.select2-select').select2(); // Re-instrument original row 

    $clone.find('.select2-select').select2(); // Instrument clone 
}); 

jsfiddle