ajax 页面加载后 Select2 将无法工作（呈现）

Question

我有使用 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 加载 html 内容 jQuery:

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

在这种情况下，我的 select2 不会呈现，也不会工作。如何使用 ajax 内容加载呈现插件。

Answer 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
        },
    })
})

希望这对你有用

ajax 页面加载后 Select2 将无法工作（呈现）

Select2 won't work (render) after ajax page load

ajax

jquery

plugins

pageload