javascript - 无法从 javaScript 调用 Bootstrap 插件

标签 javascript jquery html css twitter-bootstrap

我正在尝试为我的网页调用 Bootstrap 插件。

这就是我所说的插件:

Select Picker

Select Picker 2

当我像这样从我的 html 文件调用插件时:

<html>
<head></head>
<body>
    <select class="selectpicker show-tick" id="tag" ata-style="btn-primary">
        <option>stocks</option>
        <option>bank</option>
        <option>card</option>
    </select>
    <script type="text/javascript">
    $(window).on('load', function () {
        $('.selectpicker').selectpicker('hide');
    });
    </script>
</body>
</html>

输出没问题;选择框带有所有加载的 CSS,如上面的链接所示。

但是,当我从 JS 文件动态创建框时,选择框显示为没有任何效果的普通选择框。

var selectElement1_act = document.createElement("select");
selectElement1_act.setAttribute("class", "selectpicker");

如有任何帮助,我们将不胜感激。

最佳答案

这是因为您在 window 加载事件上调用该函数,当动态创建元素时,它们不一定存在于此时的 DOM 中。

由于您使用的是 jQuery,因此最好在 JS 文件中使用以下代码:

$(function() {  
    var selectPicker = $('<select class="selectpicker" />');
    selectPicker.appendTo('body');
    selectPicker.selectpicker('hide');
});

关于javascript - 无法从 javaScript 调用 Bootstrap 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23422560/

相关文章:

javascript - 代码在 Firefox 或 IE 中无法正常运行

javascript - jQuery closest() 不适合我(或者我不适合它)

jquery - 如何显示用户在 Instagram 上喜欢的所有图像(通过 API)?

html - 视差图像填充屏幕而不是 div

javascript - 按 Enter 键时的动态文本框

javascript - 动态创建的元素上的事件绑定(bind)?

c# - 在 MVC 操作中隐藏查询字符串

javascript - Jquery mobile - 保存滚动位置

javascript - 如果数据属性为零,则 "parents().filter"返回未定义

Jquery - 获取构造的div的高度