在ajax获取内容中使用JS select2 init加载eModal不会第一次被调用

Question

我接手了一个项目，遇到了以下问题。

当点击按钮加载eModal时，通过ajax获取的文件中的JS并没有被执行，以将select变成select2多重。这只会发生第一次。

如果您关闭模式并重新打开它，它就可以正常工作。

我尝试过使用 bs.shown、onload、onShow 来触发函数来初始化 select2 但没有效果。

distribute() 函数来自成功的 ajax 调用。它返回一个名称列表，用户可以从中进行选择。第二个代码是使用 jQuery 从 ajax 加载的模态内容以初始化 select2。

我尝试在模态内容之外初始化 select2 但也没有结果

    function distribute(id, redirect) {
        eModal.setId("pwr_distribution");
        eModal.ajax({
            url: "url/" + id,
            title: 'Distribute Report',
            size: eModal.size.lg,
            buttons: [
                {
                    text: 'Close', style: 'danger', close: true
                },
                {
                    text: 'Distribute & Close', style: 'success', close: true, click: function (e) {
                        var _this = $(this);
                        _this.LoadingOverlay("show", {
                            image: "",
                            fontawesome: "fal fa-cog fa-spin"
                        });
                        _this.find('.btn-primary').attr('disabled', true);
                        distribution_list = _this.find('select.project_report').val();
                        $.ajax({
                            url: 'url/' + id,
                            type: "POST",
                            data: {distribution_list: distribution_list},
                            success: function (data) {
                                if (data.success == true) {
                                    _this.find('.project_report_distribution_list_warp div.form-group').html("<div class='row'><div class='col-lg-12'><p class='text-success text-center'><i class='fal fa-check-circle' style='font-size:40px'></i><br/><br/><span class='font-size:18px'>" + data.message + "</span></p></div></div>");
                                    _this.LoadingOverlay("hide");
                                    setTimeout(eModal.close, 1500);
                                    window.location.href = redirect;
                                    return true;
                                }
                            },
                            dataType: 'json'
                        });
                    }
                }
            ],
        });
    }

<?php
$project_report_distribution_list = uniqid("project_report_distribution_list_");
?>
<div class="project_report_distribution_list_warp <?= $project_report_distribution_list ?>">
    <div class="col-12">
       

        <div class="form-group">
            <?= form_multiselect('distribution[]', 
                isset($selected_users) ? $selected_users : array() /* list */, 
                isset($selected_users) ? array_keys($selected_users) : array() /* selected */, 
                array('class' => 'form-control project_report', 'id' => $project_report_distribution_list)) 
            ?>
            <div class="formError" id="formError_distribution_list" style="color:red"></div>
        </div>
    </div>
</div>

<script type='text/javascript'>
    $(document).ready(function () {
        $("#<?= $project_report_distribution_list ?>").select2({
            width: '100%',
            dropdownParent: $('#pwr_distribution .modal-content'),
            ajax: {
                url: site_url + '/url',
                dataType: 'json'
            }
        });
    });
</script>

<style>
    div.<?= $project_report_distribution_list ?> span.select2-container{
        width: 100% !important;
    }

</style>