使用 ajax 动态创建时，Select2 未在 bootstrap 模态中初始化

Question

我是一个弹出模式，用于在输入中显示动态数据以便编辑，在同一页面上我使用 select2 没有任何问题，但在模式中它看起来在加载后没有被初始化，即使 jquery 正在使用此模式成功初始化它（或者这是它应该做的）：

<div class="modal fade" id="edit" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Edit</h4>
                </div>
                <div class="modal-body">
                    <div class="company_edit">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div></div></div> </div>

和jquery：

$('.btn.btn-primary.btn-xs').on('click', function () {
                var company_id = $(this).attr('value');
                $.ajax({
                    type: 'post',
                    url: 'dist/php/info_to_edit.php', 
                    data: 'post_id=' + company_id,
                    success: function (r)
                    {
                        $(".select2").select2({
                            tags: true,
                            tokenSeparators: [',', ' ']
                        });
                        // now you can show output in your modal 
                        $('#edit').modal('show'); // put your modal id 
                        $('#edit').find('.company_edit').html(r);
                    }});});

和 php 片段：

echo '<select name="countries_import[]" class="form-control select2" multiple="multiple" id="import_select"></select>';

Answer 1

您可以尝试设置

$('#edit').find('.company_edit').html(r);

之前

$(".select2").select2({
  tags: true,
  tokenSeparators: [',', ' ']
});