Jquery 添加动态表单后，Select2 消失

我有一个关于selt2的问题，发生的情况是我有一个动态表单，但每次我单击addNewItembtn之前字段的elect2函数时，它就会消失.

代码如下:

$(document).ready(function() {
            // set dropdown to select2
            $('#warehouse_id').select2();
            $('.product_id').select2();
            $('.unit_of_measure_id').select2();
            $('.product_type_id').select2();

            $('#addProductItemBtn').click(function(e) {
                e.preventDefault();
                let productItems = $('tbody tr').length;
                let productItem = `
                    <tr>
                        <td>
                            <select name="productItems[${productItems}][product_type_id]" id="product_type_id" class="form-control product_type_id">
                                <option value="">-- Product Type --</option>
                                @foreach ($productTypes as $productType)
                                    <option value="{{ $productType->id }}"
                                        @selected(old("productItems.{$loop->index}.product_type_id"))>
                                        {{ $productType->title }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <select name="productItems[${productItems}][product_id]" id="product_id" class="form-control product_id">
                                <option value="">-- Product --</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}"
                                        @selected(old("productItems.{$loop->index}.product_id"))>
                                        {{ $product->product_name }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="text" name="productItems[${productItems}][serial_number]" id="serial_number" class="form-control serial_number">
                        </td>
                        <td>
                            <input type="brand" name="productItems[${productItems}][brand]" id="brand" class="form-control brand">
                        </td>
                        <td>
                            <select name="productItems[${productItems}][unit_of_measure_id]" id="unit_of_measure_id" class="form-control unit_of_measure_id">
                                <option value="">-- UOM --</option>
                            </select>
                        </td>
                        <td>
                            <input type="number" name="productItems[${productItems}][quantity]" id="quantity" class="form-control quantity" value="1">
                        </td>
                        <td>
                            <input type="number" name="productItems[${productItems}][item_cost]" id="item_cost" class="form-control item_cost" value="0.00">
                        </td>
                        <td>
                            <a href="#" class="deleteProductItemBtn">Delete</a>
                        </td>
                    </tr>
                `;
                $('tbody').append(productItem);
                $('.product_id').select2();
                $('.unit_of_measure_id').select2();
                $('.product_type_id').select2();
            });

            $(document).on('click', '.deleteProductItemBtn', function(e) {
                e.preventDefault();
                $(this).closest('tr').remove();
            });
});

加载页面后， Select 器2仍在工作 first load个

在单击添加新项目按钮后 enter image description here个

您可能注意到，在添加新字段后，selt2函数确实消失了.如何才能使添加新字段后上一页的状态保持不变.提亚

如何才能使添加新字段后上一页的状态保持不变.提亚