gpt4 book ai didi

javascript - 如何在 AJAX 加载的 HTML 上创建新的 Bootstrap 选择器控件?

转载 作者:行者123 更新时间:2023-11-30 09:29:59 25 4
gpt4 key购买 nike

当我刷新页面时,“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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com