我有使用 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 内容加载来渲染插件。
最佳答案
问题是您正在 .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
},
})
})
希望这对你有用
关于jquery - ajax 页面加载后 Select2 将无法工作(渲染),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34150044/