select2 4.0 - TypeError：$(.).select2(…).select2(.)未定义

Question

试图最终切换到4.0版本的select2并遇到问题。

所有这些在3.5上都很好。在按钮单击我打开一个引导模式，并加载一个远程页面到它。我已经测试了所有的一切在一个正常的页面(而不是在一个模式)，它的工作正常。当像下面这样加载在一个模态中时，就会打开所有类似于3.5的所有内容，但是select2正在返回一个错误。我认为这里的问题是select2是从远程页面加载的.问题是，同样的远程加载方法总是完美地工作在3.5。

TypeError: $(...).select2(...).select2(...) is undefined

js:

// show edit modal
$('#datatable2').on('click', '.dtEdit', function () {

    var data = {
      'filter_id': $(this).parents('tr').attr('id').replace('dtrow_', '')
    };

    $('#modal-ajax').load(
      '/modals/m_filtering_applications_filters.php',
      data,
      function() {
        $(this).modal('show');
        changeSettings();
        hourSelection();
      }
    );
});

// change filter modal confirmation
var changeSettings = function() {

    // get the default filter           
    var default_filter = $("#filter_default").val();

    //app list
    $("#vedit-filter").select2({
        placeholder: {
            id: default_filter, // or whatever the placeholder value is
            text: default_filter // the text to display as the placeholder
        },
        allowClear: true,
        multiple: false,
        tags: true,
        createTag: function (query) {
            return {
                id: query.term,
                text: query.term,
                tag: true
            }
        },
        ajax: {
            dataType: 'json',
            delay: 500,
            type: 'post',
            url: '/process/get_application_list.php',
            data: function (params) {
                return {
                    term: params.term, // search term
                    page: params.page, //page number
                    page_limit: 25, // page size
                };
            },
            results: function (data, page) {
                var more = (page * 25) < data.total; // whether or not there are more results available
                return {
                    results: data.results,
                    more: more
                };
            }
        }
    }).select2('val', [default_filter]).on('change', function() {
        $(this).valid();
    });

}

m_filtering_applications_filters.php :

只是加载的模态的内容：

<div class="modal-dialog">
    <div class="modal-content">                             
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
            <h3 class="modal-title">Change these settings?</h3>
        </div>
        <form id="application-filters-edit">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">

                        <div class="row">

                            <div class="col-md-12 margin-bottom-30 form-group">
                                <div class="input-modal-group">
                                    <label for="vedit-filter" class="f-14"><b>Application to filter :</b></label>
                                    <select id="vedit-filter" name="settings[filter]" class="form-control select2">
                                        <option value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>" selected=""><?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?></option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input type="hidden" name="settings[users][]" value="<?php echo $result['user_id']; ?>"/>
                <input id="filter_default" type="hidden" name="settings[original]" value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>"/>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <?php
                    if (!$result)
                    {
                        //disable the button
                        echo '<button type="button" class="btn btn-primary disabled" data-dismiss="modal"><i class="fa fa-check-circle"></i> &nbsp;Save Settings</button>';
                    }
                    else
                    {
                        // show the button
                        echo '<button class="btn btn-primary" type="submit"><i class="fa fa-check-circle"></i> &nbsp;Save Settings</button>';
                    }
                ?>

            </div>
        </form>
    </div>
</div>

更新：

好的，错误来自：

}).select2('val', [default_filter]).on('change', function() {
    $(this).valid();
});

附在最后..。这是用于使用jquery验证脚本(我在这里没有将它包含在jS中)，而且在3.5中也很好。您可以不再使用4.0或其他工具添加到select2()中吗？

删除这一行时，错误会消失，但是select2的显示宽度非常小，我无法集中精力在搜索框中输入任何值，因此它在模式中仍然不可用。

UPDATE2:

意识到事件在4.0中发生了变化，所以这似乎是可行的：

}).on("change", function (e) {
    $(this).valid();
});

但是仍然不能在搜索框中输入任何内容。此外，我注意到，如果我点击输入框中的箭头以外的任何东西来显示下拉列表，它的作用就好像鼠标被按住了一样--它突出显示了模式中的所有文本/内容。

Answer 1

解决方案:通过在js中添加以下内容，解决了在bs3模式中使用select2时遇到的所有问题：

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

内容/文本的突出显示已经消失。搜索框上的焦点消失了。现在看来一切都很顺利。我目前还没有任何关于这一行实际工作的信息，但我将对此进行研究，以找出答案，并将其添加到这里，供任何人将来参考。