gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 17:42:10 25 4
gpt4 key购买 nike

我正在尝试制作一个计算器,如果您愿意,您可以增加输入数量 - 计算器本身可以很好地查找必要的值,但是我也希望能够进行搜索下拉输入确实变得相当长,因此我使用 bootstrap-select .

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

您期望什么?所有输入都将像默认输入一样“风格化”,包括搜索菜单等。你会得到什么?只有默认输入是“风格化”的,而通过单击按钮创建的输入则不是“风格化”

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

您只需在将新的选择添加到页面后添加此语句即可:

$(gear).selectpicker();

关于javascript - Bootstrap 未应用于动态创建的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47683438/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com