当我刷新页面时，“Bootstrap-Select”脚本对内容运行良好。当我更改选择中的选项时，我得到了 #ajax_filter 的新内容，但脚本 Bootstrap-Select 不起作用。如何在 AJAX 响应后重新加载此脚本？
<!-- in <head> -->
<script id="bselect1" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<div id="#ajax_filter">
<select name='components[]' class="selectpicker form-control components" id='cheese' data-live-search="true" data-count-selected-text='<span class="label label-danger">{0}</span> Ser' title='<span class="label label-danger">0</span> Ser' multiple data-selected-text-format="count > 0">
<option value="aaaa">AAA</option>
<option value="bbbb">BBBB</option>
</select>
</div>
<script>
$(function(){
$('.components').on('change',function() {
$.ajax({
url: 'menu/ajax_filter',
data: { 'components': components, 'size': size },
type: "post",
success: function(data) {
$("#ajax_filter").hide().html(data).fadeIn('fast');
$('#bselect1').remove();
$.getScript("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js", function() {
$('script:last').attr('id', 'bselect1');
});
}
});
});
});
</script>
最佳答案
您的方法不太正确。您不想创建新的 <script>引用库以创建控件的新实例的元素 - 这实际上会导致它解决的更多问题。
相反，您需要通过调用 selectpicker() 直接在新元素上初始化库在 AJAX 调用完成并且 DOM 更新后对它们执行函数，如下所示:
$.ajax({
url: 'menu/ajax_filter',
data: { 'components': components, 'size': size },
type: "post",
success: function(data){
$("#ajax_filter").hide().html(data).fadeIn('fast').find('.your-select-elements').selectpicker();
}
});
关于javascript - 如何在 AJAX 加载的 HTML 上创建新的 Bootstrap 选择器控件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46907378/