Jquery - Dropdown-Liste "select2" deaktiviert beim Klonen einer Tabellenzeile

Question

Ich habe eine Tabelle mit vier Dropdown-Listen "select2". Wenn ich die Zeile klonen, um sie zu duplizieren, sind die Dropdown-Listen der neuen Zeile deaktiviert, ich kann sie nicht anklicken, was muss ich in meinen Code einfügen, um sie zu aktivieren.

Die HTML-Tabelle:

<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> 

und der jQuery-Code:

// 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

Ich versuche, das Klonen Elemente für diese Art von Grund zu vermeiden. Eine Alternative zum Klonen ist die Verwendung einer Vorlage für den HTML-Code.

Wenn Sie mit dem Klonen fortfahren möchten, können Sie die Select2-Steuerelemente in der ursprünglichen Zeile deaktivieren, bevor Sie sie klonen, und sie anschließend erneut instrumentieren.

Sie entkoppeln die Select2-Steuerungen mit der .select2('destroy')-Funktion.

$(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