引导未应用于动态创建的元素

2022-04-09 00:00:00 calculator live javascript html

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

相关文章