Bootstrap 未应用于动态创建的元素

Question

我正在尝试制作一个计算器，如果您愿意，您可以增加输入的数量 - 计算器本身可以很好地找到必要的值，但我也希望有可能搜索下拉输入，因为它们确实很长，因此我使用 bootstrap-select.

问题是只有默认输入才会应用 bootstrap 主题，而通过单击必要按钮创建的输入不会应用主题。我该如何解决这个问题？

您期望什么？ 所有输入都 'stylised' 与默认输入一样，带有搜索菜单等。 你得到了什么？只有默认输入是'stylised'，而通过点击按钮创建的不是

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>

Answer 1

这是因为您动态添加到页面的 select 从未初始化为 bootstrap-select 组件。你已经在页面上的那个在页面加载时自动初始化，因为它有 selectpicker class.

您只需在将新的 select 添加到页面后添加此语句：

$(gear).selectpicker();

Answer 2

var gearPrices= new Array();
gearPrices["none"]=0;
gearPrices["pistol1"]=25000;

var i = 0;

function createGear() {
    i++;
    
    var container = document.getElementById("newGear");
    container.setAttribute("class", "bootstrap-select");
    
    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);
    
    var amount = document.createElement("input");
    amount.id = "amount" + i;
    amount.type = "number";
    container.appendChild(amount);
  
  // The newly created element should be updated
  $(gear).selectpicker('refresh');

    return i;
}

function getGearPrice() {
    var price = 0, ix, ixLen, value, type;
    var newGear = document.getElementById('newGear');
    
    price += (gearPrices[document.getElementById('gear0').value || 'none']) *     
             (document.getElementById('amount0').value || 0);
             
    var amountInputs = document.querySelectorAll("#newGear input[type='number']");
    var selectElements = document.querySelectorAll("#newGear select");
    
    for(ix = 0, ixLen = selectElements.length; ix < ixLen; ix++){
        type = selectElements[ix].value || 'none';
        value = amountInputs[ix].value || 0;
        price += gearPrices[type] * +value;
    }
    
    return price;
}

function getTotal() {
    var gearPrice = getGearPrice();
    
    document.getElementById('gearTotal').innerHTML = "Gear: £" + gearPrice;
    
}

<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>
                <input type="text" id="amount0">
        <div id="newGear">
        
        </div>
        <input type="button" onclick="createGear()" value="Create Gear Input!">
        <input type="button" onClick="getTotal()">
    </form>
    <p id="gearTotal">
    Gear Total Over Here!
    </p>
    
    <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" />
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <script src="js/script.js" type="text/javascript"></script>
    

  <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>

Answer 3

请检查我的解决方案是否是您需要的。我添加 {$('#' + gear.id).selectpicker(); 因为动态生成你必须手动调用 bootstrap-select。我还将它包装在 setTimeout 中以允许浏览器正确呈现所有内容：setTimeout(function () {$('#' + gear.id).selectpicker();}, 300).

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);
    setTimeout(function () {$('#' + gear.id).selectpicker();}, 300)
    
    
    
    
    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" />
    <link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
    <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>

Bootstrap 未应用于动态创建的元素

Bootstrap not being applied to dynamically created elements

javascript

html

calculator

live