Impossibile clonare la riga della tabella con select2 correttamente

Question

Ho un modulo per la fattura dove è necessario aggiungere elementi come richiesto. Facendo clic sul pulsante Aggiungi sulla riga corrispondente, la riga è stata aggiunta alla riga precedente. Ma Select2 non funziona normalmente dopo.

Ho provato una soluzione da SO in cui distruggere selezionare prima del clone, quindi inizializzarlo di nuovo. Ma sta inizializzando due select2 dopo la prima riga.

<tr class="tr_clone"> 
    <td> 
     <div class="input select"> 
      <select required="required" id="Item" class="items select2-hidden-accessible" name="data[Invoice][item_id][]" tabindex="-1" aria-hidden="true"> 
       <option value=""></option> 
       <option value="1">item 1</option> 
       <option value="2">Item 2</option> 
       <option value="3">Item 1+2</option> 
       <option value="4">Set 1</option> 
       <option value="5">NURSERY Books</option> 
      </select><span class="select2 select2-container select2-container--default" dir="ltr" style="width: 231px;"><span class="selection"><span aria-expanded="false" aria-haspopup="true" aria-autocomplete="list" role="combobox" class="select2-selection select2-selection--single" tabindex="0" aria-labelledby="select2-Item-container"><span class="select2-selection__rendered" id="select2-Item-container" title=""></span><span role="presentation" class="select2-selection__arrow"><b role="presentation"></b></span></span> 
      </span><span aria-hidden="true" class="dropdown-wrapper"></span></span> 
     </div> 
     <input type="hidden" id="ItemName" class="item_name" name="data[Invoice][item][]"> 
     <input type="hidden" id="ItemName" class="item_group_id" name="data[Invoice][item_group_id][]"> </td> 
    <td> 
     <div class="input text"> 
      <input type="number" required="" min="0" name="data[InvoiceDetail][quantity][]" class="quantity small" id="quantity]["> 
      <p class="quantity_a"></p> 
     </div> 
    </td> 
    <td> 
     <div class="input text"> 
      <input type="text" readonly="readonly" required="" name="data[InvoiceDetail][price][]" class="price small" id="price"> 
     </div> 
    </td> 
    <td> 
     <div class="input text"> 
      <input type="text" readonly="readonly" required="" name="data[InvoiceDetail][unit][]" class="unit small" id="unit]["> 
     </div> 
    </td> 
    <td> 
     <div class="input text"> 
      <input type="text" readonly="readonly" required="required" id="Amount" class="amount small" name="data[Invoice][amount][]"> 
     </div> 
    </td> 
    <td> 
     <input type="button" class="tr_clone_add" value="Add" name="add"> 
    </td> 
    <td class="remove">X</td> 
</tr> 

codice jQuery:

$("table").on('click','.tr_clone_add' ,function() { 
     $('.items').select2("destroy");   
     var $tr = $(this).closest('.tr_clone'); 
     var $clone = $tr.clone(); 
     $clone.find(':text').val(''); 
     $tr.after($clone);  
     $('.items').select2();  
    }); 

Risultato:

Answer 1

risolto il problema utilizzando il codice seguente:

$("select.items").select2(); 
var a = 0; 
$(".datepicker").datepicker({ 
    format: 'dd-mm-yyyy', 
}); 
$("table").on('click','.tr_clone_add' ,function() { 
    $(this).closest('.tr_clone').find(".items").select2("destroy"); 
    var $tr = $(this).closest('.tr_clone'); 
    var $clone = $tr.clone(); 
    $clone.find(':text').val(''); 
    $tr.after($clone); 
    $("select.items").select2(); 
}); 

Cosa ho cambiato:

Ho appena distruggere l'select2 sulla riga che voglio clonare. Quindi inizializzare la select2 su tutti gli ingressi con gli articoli della classe .

Answer 2

provare questo

$('.items').select2(); 
$("table").on('click','.tr_clone_add' ,function() { 
    $('.items').select2("destroy");   
    var $tr = $(this).closest('.tr_clone'); 
    var $clone = $tr.clone(); 
    $tr.after($clone); 
    $('.items').select2(); 
    $clone.find('.items').select2('val', ''); 
}); 

JSFIDDLE example

/* EDIT */

Se ho rimosso dal attributo SELEZIONA id e classe CSS select2-hidden-accessible e sul fondo completamente rimosso anche select2 select2-container sembra funzionare bene.

JSFIDDLE example with your row