Không thể sao chép hàng bảng bằng select2 chính xác

Question

Tôi có một biểu mẫu cho Hóa đơn, nơi tôi cần thêm các mục theo yêu cầu. Khi nhấp vào nút Thêm trên hàng tương ứng, hàng đã được thêm vào hàng trước đó. Nhưng Select2 không hoạt động bình thường sau đó.

Tôi đã thử giải pháp từ SO, trong đó hủy chọn trước khi sao chép rồi khởi tạo lại nó. Nhưng nó đang khởi tạo hai select2 sau hàng đầu tiên.

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

Jquery Code:

$("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();  
    }); 

Kết quả:

Answer 1

Giải quyết được vấn đề sử dụng đoạn mã sau:

$("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(); 
}); 

gì tôi đã thay đổi:

Tôi chỉ phá hủy các Select2 trên hàng mà tôi muốn sao chép. Sau đó, khởi tạo select2 trên tất cả các đầu vào với lớp các mục.

Answer 2

thử này

$('.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 */

Nếu tôi lấy ra từ CHỌN thuộc tính id và lớp css select2-hidden-accessible và ở phía dưới hoàn toàn bị loại bỏ cũng select2 select2-container có vẻ như là làm việc tốt.

JSFIDDLE example with your row