ajax 页面加载后 Select2 将无法工作（渲染）答案

【问题标题】：Select2 won't work (render) after ajax page loadajax 页面加载后 Select2 将无法工作（渲染）
【发布时间】：2015-12-08 07:13:32
【问题描述】：

我的页面使用select2 插件：

$(function() {
    if($('.su-tech').length) {
        $('.su-tech').select2({
            allowClear: true,
            width: '100%'
        });
    }
});

和这样的html代码：

<select class="select2 su-tech" style="width:100%;">                                                    
    <option value="1" >option1</option>
    <option value="2" >option2</option>
    <option value="3" >option3</option>
</select>

我也使用 ajax 通过 jQuery 加载 html 内容：

$(document).on("click", "#page1", function () {
    $.ajax({
        type: 'POST',
        url: "/example-page1",
        success: function (result) {
            $('.ajax_content').html(result);
        },
    })
})

在这种情况下，我的select2 不会渲染并且无法工作。如何使用 ajax 内容加载渲染插件。

【问题讨论】：

在success 的ajax 中再次初始化select2
您的select 是否位于.ajax_content 内？
select2 是示例。我有很多插件都有这个问题。比如x-editable、ckeditor、...
我的选择在结果中定位并动态添加到页面
非常好的答案。它对我有用。谢谢

标签： jquery ajax plugins pageload

【解决方案1】：

问题是您正在.ajax_content 内重新创建 DOM。要解决此问题，您可以创建一个 initialize 函数并为所有需要在 DOM 上初始化的控件添加代码，如下所示

function Initialize()
{
    if($('.su-tech').length) {
            $('.su-tech').select2({
                allowClear: true,
                width: '100%'
            });
    }
}

然后在每个 Ajax 请求成功时调用此函数，如下所示

$(document).on("click", "#page1", function () {
    $.ajax({
        type: 'POST',
        url: "/example-page1",
        success: function (result) {
            $('.ajax_content').html(result);
            Initialize(); // after the HTML update
        },
    })
})

希望这对你有用

【讨论】：

没有更高效的解决方案？我认为这个解决方案会降低加载速度
这取决于您如何在Initialize 函数中使用事件委托。您可以通过在选择 DOM 对象时选择最佳 selector 来进行优化。或者尝试通过 ajax 请求减小 HTML 更新的大小。
真的很好。很好的答案。谢谢你的回答。