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

Question

所以我目前正在为我的网站制作一个动态插入表单。 为了实现这一点，我正在为 append 制作一个按钮，这是一个应该在其中使用 Select2 插件的新文本框。 一旦我使用 jQuery append() function，附加的代码甚至没有读取 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>

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

Answer 1

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

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

并在附加重新初始化后使用

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

Answer 2

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

这是用于在所有 select 上的页面就绪时初始化 select2 的代码

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

当您的 append 停止时，您必须调用 select2 ，如下所示：

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

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