引导未应用于动态创建的元素-前端问题

Bootstrap not being applied to dynamically created elements(引导未应用于动态创建的元素)

本文介绍了引导未应用于动态创建的元素的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试制作一个计算器，如果您愿意，您可以在其中增加输入的数量-计算器本身在寻找必要的值方面工作得很好，但我也希望能够搜索下拉输入，因为它们确实很长，因此我使用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="anMvc2NyaXB0Lmpz" 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="aHR0cHM6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMS4xMS4yL2pxdWVyeS5taW4uanM="></script>
  <script src="aHR0cHM6Ly9tYXhjZG4uYm9vdHN0cmFwY2RuLmNvbS9ib290c3RyYXAvMy4zLjIvanMvYm9vdHN0cmFwLm1pbi5qcw=="></script>
  <script src="Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS9hamF4L2xpYnMvYm9vdHN0cmFwLXNlbGVjdC8xLjYuMy9qcy9ib290c3RyYXAtc2VsZWN0Lm1pbi5qcw=="></script>


</body>
</html>

问题描述

推荐答案