我附加的 HTML 没有运行当前的 jQuery 代码

Question

所以我目前正在为我的网站制作一个动态插入表单。为此，我制作了一个按钮来附加一个应该在其中使用 Select2 插件的新文本框。一旦我使用 jQuery append() 函数，附加的代码甚至没有读取 Select2 插件。

我尝试使用 AJAX 并将 $() 放在附加代码的前面。但没有任何效果。

这是我的模态代码的一部分。

<div class="block-content">
                    <div class="row">
                        <div class="col-12 d-flex justify-content-end align-content-end">
                            <button id="add-more-btn" class="btn btn-primary"><i class="fa fa-plus"></i>&nbsp; Add More</button>
                        </div>
                    </div>
                    <br />
                    <form method="POST" action="/driver-management/create/vehicle-category">
                    @csrf 
                    <div id="data-pointer" class="row d-none">
                        <div class="col-12">
                        <strong>Data #1</strong>
                        </div>
                    </div>
                    <div id="more-field">
                    <div class="row">
                        <div class="col-12 form-group">
                            <select class="js-select2 form-control" required name="select-category" style="width: 100%;" data-placeholder="Choose one..">
                                <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin -->
                                    @foreach($vehicle as $data)
                                    <option value="{{ $loop->iteration }}"> {{ $data->vehicle_cat_name }} </option>
                                    @endforeach
                            </select>
                        </div>
                    </div>
                    <br />
                    </div>
                        <div class="row">
                            <div class="col-12">
                                <div class="form-group float-right">
                                    <input type="submit" class="btn btn-outline-primary" id="Create" value="Submit">
                                    <button type="button" class="btn btn-outline-danger" data-dismiss="modal" aria-label="Close">Close</button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <!-- END Input Grid Sizes -->
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let count = 0;
    $('#add-more-btn').click(function(e){
        $('#data-pointer').removeClass('d-none');
        $('#more-field').append($('<div id="data-pointer" row="row"> <div class="col-12"> <strong>Data #'+(count+1)+'</strong> </div> </div> <div class="row" id="data"> <div class="col-12 form-group"> <select class="js-select2 form-control" required id="select-category-'+count+'" name="select-category-'+count+'" style="width: 100%;" data-placeholder="Choose one.."> <option></option><!-- Required for data-placeholder attribute to work with Select2 plugin --> @foreach($vehicle as $kendaraan) <option value="{{ $loop->iteration }}"> {{ $kendaraan->vehicle_cat_name }} </option> @endforeach </select> </div> </div> <br /> '));
    });
</script>

如果您在我的模态部分看到，则 Select2 插件中嵌入了一些选择选项。我希望附加的代码与第一个代码完全相同。顺便说一句，插件已经在主页上声明了，没有任何问题。

Answer 1

您可以destroy select2 在追加之前使用

$(".js-select2").select2('destroy'); //

并在附加后使用

重新初始化

 $('.js-select2').select2({ width: '100%', placeholder: "Select an Option", allowClear: true });

Answer 2

Javascript 和 jquery 应用于特定事件的对象。通常像 select2 这样的插件会在页面就绪时激活。 在页面中添加新对象时，您必须重新激活插件。您可以通过多种方式进行操作： - 销毁并重新初始化插件。不是很优雅但很安全 - 仅在新对象上初始化。更优雅更快捷

这是用于在所有选择页面准备就绪时初始化 select2 的代码

$(document).ready(function() {
    $('select').select2();
});

当您的追加停止时，您必须调用 select2：

$('#data-pointer select').select2();

注意添加具有相同 ID 的新对象不是一个好习惯。