引导未应用于动态创建的元素
本教程将介绍引导未应用于动态创建的元素的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。
问题描述
我正在尝试制作一个计算器，如果您愿意，您可以在其中增加输入的数量-计算器本身在寻找必要的值方面工作得很好，但我也希望能够搜索下拉输入，因为它们确实很长，因此我使用bootstrap-select。
问题是只有默认输入才会应用引导主题，而通过单击必要按钮创建的输入不会应用主题。我怎么着手修复此问题？
您期望的是什么？所有输入都像默认输入一样设置了"样式"，并带有搜索菜单等。
您会看到什么？只有默认输入是"带样式的"，而通过单击按钮创建的输入不会
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
var i = 0;
function createGear() {
i++;
var container = document.getElementById("newGear");
var gear = document.createElement("select");
gear.id = "gear" + i;
gear.setAttribute("class", "selectpicker");
gear.setAttribute("data-live-search", "true");
container.appendChild(gear);
var none = document.createElement("option");
none.value = "none";
none.text = "";
gear.add(none);
var pistols = document.createElement("optgroup");
pistols.label = "Pistols";
gear.add(pistols);
var pistol1 = document.createElement("option");
pistol1.value = "pistol1";
pistol1.text = "M1911";
gear.add(pistol1);
pistols.appendChild(pistol1);
return i;
}<!DOCTYPE html>
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css" />
<script src="js/script.js" type="text/javascript"></script>
</head>
<body>
<form id="form">
<select class="selectpicker" data-live-search="true" id="gear0">
<option></option>
<optgroup label="Pistols">
<option value="pistol1">M1911</option>
</optgroup>
</select>
<div id="newGear">
</div>
<input type="button" onclick="createGear()" value="Create Gear Input!">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
</body>
</html>推荐答案
这是因为您动态添加到页面的select永远不会被初始化为bootstrap-select组件。加载页面时，页面上已有的类将自动初始化，因为它具有selectpicker类。
将新的SELECT添加到页面后，只需添加以下语句：
$(gear).selectpicker();
好了关于引导未应用于动态创建的元素的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。
