Bootstrap selectpicker not working when added dynamically

Question

I'm trying to dynamically add new tabs by appending Html code (div with content). I'm doing so by:

1. creating a div with the tab content, which includes amongs all (bootstrap) 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>

2. Afterwards - I get the div HtmlElement, by using the getElementById and its innerHtml

    var tabs = $("#container").tabs(); .. .. var div_content = document.getElementById("main_div").innerHtml;

3. Then - appending the Html element (the innerHtml seen in secrion 2) to the tabs.

    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.

Have any idea why bootstrap controls (selectPicker and DatePicker) does not work inside the tab?

Thanks.

Answer 1

添加后需要刷新选择器：

$('.selectpicker').selectpicker('refresh');