无法使用 select2 正确克隆 table 行

Question

我有一个发票表格，我需要根据需要在其中添加项目。单击相应行上的添加按钮时，该行已附加到上一行。但是之后Select2就不能正常工作了

我已经尝试过 SO 的解决方案，其中在克隆之前销毁 select 然后再次初始化它。但它在第一行之后初始化两个 select2。

<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代码：

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

结果：

Answer 1

试试这个

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

/* 编辑 */

如果我从 SELECT 属性中删除 id 和 css class select2-hidden-accessible 并且在底部也完全删除 select2 select2-container 似乎工作正常。

JSFIDDLE example with your row

Answer 2

使用以下代码解决了问题：

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

我改变了什么：

我只是销毁了要克隆的行上的 select2。然后使用 class items.

在所有输入上初始化 select2

无法使用 select2 正确克隆 table 行

Unable to clone table row with select2 correctly

jquery

select2