代码之家 › 专栏 › 技术社区 › Ant Arni

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

live calculator html javascript

0

Ant Arni · 技术社区 · 7 年前

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

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

你期待什么? 所有输入都要像默认输入一样“风格化”,带有搜索菜单等。 你得到了什么? 只有默认输入是“样式化”的,而通过单击按钮创建的输入不是

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>

3 回复 | 直到 7 年前

1

2

Titus 7 年前

那是因为 select 您动态添加到页面中的内容从未初始化为 bootstrap-select 组件。当页面加载时,您已经在页面上找到的一个会自动初始化,因为它具有 selectpicker 班

在将新的select添加到页面后,您只需添加以下语句:

$(gear).selectpicker();

2

JSingh 7 年前

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>

3

0

Radek Anuszewski 7 年前

请检查我的解决方案是否符合您的需要。我添加 {$('#' + 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>