引导程序未应用于动态创建的元素
[英]Bootstrap not being applied to dynamically created elements
问题描述
I'm attempting to make a calculator where you have the possibility to increase the number of inputs if you so wish to - the calculator itself works fine in finding the necessary values, however I wish to also have the possibility to search through the dropdown inputs as they do get quite lengthy, hence why I am using bootstrap-select . 
我正在尝试制作一个计算器，如果愿意，您可以增加输入的数量-计算器本身可以很好地找到必要的值，但是我也希望可以搜索下拉输入因为它们确实很长，所以为什么我要使用bootstrap-select 。
The problem is that only the default inputs get the bootstrap theme applied to them, whereas the inputs created by clicking on the necessary button don't get the theme applied. 问题在于，只有默认输入将引导主题应用到它们，而通过单击必要按钮创建的输入却没有应用主题。 How do I go about fixing this? 我该如何解决这个问题？
What do you expect? 你能指望什么？ All inputs to be 'stylised' like the default one, with the search menu etc. What do you get? 所有输入都将被“样式化”，例如默认输入，以及搜索菜单等。您会得到什么？ Only the default input is 'stylised', whereas the ones created by clicking on the button don't 只有默认输入是“样式化的”，而通过单击按钮创建的输入不是
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 个解决方案
解决方案1
1 已采纳 2017-12-06 21:19:53
That is because the select that you dynamically add to the page are never initialised as bootstrap-select components. 这是因为select你动态地添加到页面永远不会初始化为bootstrap-select组件。 The one that you've already got on the page is automatically initialised as such when the page loads because it has the selectpicker class. 页面上已加载的页面会自动初始化，因为页面具有selectpicker类。
You just need to add this statement after you add the new select to the page: 在将新选择添加到页面后，只需添加以下语句：
$(gear).selectpicker();
解决方案2
1 2017-12-06 21:20:57
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 2017-12-06 21:21:00
Please check if my solution is what you need. 请检查我的解决方案是否是您需要的。 I add {$('#' + gear.id).selectpicker(); 我添加{$('#' + gear.id).selectpicker(); cause for dynamically generated you have to call bootstrap-select manually. 动态生成的原因，您必须手动调用bootstrap-select 。 I also wrapped it in setTimeout to allow browser to render everything properly: setTimeout(function () {$('#' + gear.id).selectpicker();}, 300) . 我还将其包装在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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.