[英]Bootstrap selectpicker not working when added dynamically
I'm trying to dynamically add new tabs by appending Html code (div with content).我正在尝试通过附加 Html 代码(带有内容的 div)来动态添加新选项卡。 I'm doing so by:
我这样做:
creating a div with the tab content, which includes amongs all (bootstrap) SelectPicker使用选项卡内容创建一个 div,其中包括所有(引导程序) SelectPicker
<div id="main_div"> ... <label for="title" class="label-heading"> First Name </label> <select multiple class="form-control" name="last_name" id="last_name" </select> ... </div>
Afterwards - I get the div HtmlElement, by using the getElementById and its innerHtml之后 - 我通过使用 getElementById 和它的 innerHtml 获得了 div HtmlElement
var tabs = $("#container").tabs(); .. .. var div_content = document.getElementById("main_div").innerHtml;
Then - appending the Html element (the innerHtml seen in secrion 2) to the tabs.然后 - 将 Html 元素(在 secrion 2 中看到的 innerHtml)附加到选项卡。
tabs.append(div_content);
The problem is that by doing so, it seems that the controls SelectPicker and datepicker functionality malfunction - selecting item from the drop down (in SelectPicker) - doing nothing.问题是,通过这样做,似乎控件SelectPicker和datepicker功能出现故障 - 从下拉列表中选择项目(在 SelectPicker 中) - 什么都不做。
Have any idea why bootstrap controls (selectPicker and DatePicker) does not work inside the tab?知道为什么引导程序控件(selectPicker 和 DatePicker)在选项卡内不起作用?
Thanks.谢谢。
添加后需要刷新选择器:
$('.selectpicker').selectpicker('refresh');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.