关于select2的问题，旧行变成常规HTML不再变成select2

Question

我想在单击按钮时创建一个新行，并且该行应该有 2 个 select2，由于某种原因，在初始化 select2 时，新行变为 select2，但旧行变为常规 HTML。有谁知道如何解决这个问题吗？

<div class="modal fade" role="dialog" id="advanceModal">
        <div class="modal-dialog modal-dialog-centered" role="document" style="max-width: 650px">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title">{{ __('tm_absenteeism_data_entry_by_employee_no.label_check_if_activated') }}</h6>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-5">
                            <select class="form-control advance_label" id="advance_label" name="advance_label" style="width: 100%">
                                <option></option>
                                <option value="GroupCompany">{{ __('tm_absenteeism_data_entry_by_employee_no.label_group_company') }}</option>
                                <option value="Department">{{ __('tm_absenteeism_data_entry_by_employee_no.label_department') }}</option>
                                <option value="Location">{{ __('tm_absenteeism_data_entry_by_employee_no.label_location') }}</option>
                                <option value="WorkingUnit">{{ __('tm_absenteeism_data_entry_by_employee_no.label_working_unit') }}</option>
                                <option value="EmployeeType">{{ __('tm_absenteeism_data_entry_by_employee_no.label_employee_type') }}</option>
                                <option value="KelasCabang">{{ __('tm_absenteeism_data_entry_by_employee_no.label_kelas_cabang') }}</option>
                                <option value="Segmen">{{ __('tm_absenteeism_data_entry_by_employee_no.label_segmen') }}</option>
                                <option value="Position">{{ __('tm_absenteeism_data_entry_by_employee_no.label_position') }}</option>
                                <option value="KlasifikasiJabatan">{{ __('tm_absenteeism_data_entry_by_employee_no.label_klasifikasi_jabatan') }}</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="container">
                        <div class="mr-auto float-left">
                            <button type="button" class="btn btn-outline-primary" id="btn_add_filter" style="width: 100px; font-size: 12px;"><i class="fa fa-plus"></i> {{ __('tm_absenteeism_data_entry_by_employee_no.btn_add') }}</button>
                        </div>
                        <div class="float-right">
                            <button type="button" class="btn btn-outline-primary" data-dismiss="modal" style="width: 100px; font-size: 12px;">Cancel</button>
                            <button type="button" class="btn btn-primary" id="btn_apply" style="width: 100px; font-size: 12px;">{{ __('tm_absenteeism_data_entry_by_employee_no.btn_apply') }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

$('#btn_add_filter').click(function() {
            var newRow = '<div class="row">' +
                            '<div class="col-5">' +
                                '<select class="form-control advance_label" id="advance_label" name="advance_label" style="width: 100%">' +
                                    '<option></option>' +
                                    '<option value="GroupCompany">Group Company</option>' +
                                    '<option value="Department">Department</option>' +
                                    '<option value="Location">Location</option>' +
                                    '<option value="WorkingUnit">Working Unit</option>' +
                                    '<option value="EmployeeType">Employee Type</option>' +
                                    '<option value="KelasCabang">Kelas Cabang</option>' +
                                    '<option value="Segmen">Segmen</option>' +
                                    '<option value="Position">Position</option>' +
                                    '<option value="KlasifikasiJabatan">Klasifikasi Jabatan</option>' +
                                '</select>' +
                            '</div>' +
                            '<div class="col-1">' +
                                '<div class="box-delete">' +
                                    '<i class="fa fa-trash-o"></i>' +
                                '</div>' +
                            '</div>' +
                        '</div>';
            
            $('.modal-body .row:last').after(newRow);

            $('.modal-body .row:last .advance_label').select2({
                placeholder: "Select Filter"
            });

            $('.modal-body .row:last .advance_filter').select2({
                placeholder: "Select Filter"
            });
        }); 

如您所见，我想在单击按钮时创建一个新行，但旧行变成常规 HTML。有人可以告诉我为什么以及如何解决它吗？预先感谢

Answer 1

很有可能，当您执行

select2

初始化时，

newRow

尚未附加到 DOM。即使您已按顺序添加了语句，但在执行下一条语句时，更改 DOM 仍需要几毫秒/纳秒的时间。尝试在附加到 DOM 之前初始化 select2，

const select2Element = $(newRow).select2({
  placeholder: "Select Filter"
});

$('.modal-body .row:last').after(select2Element);