刷新后在克隆的div中复制了Bootstrap selectpicker

Question

我有一个引导选择器：

<div id="maindiv">
  <div class="hidden">
     <select class="form-control selectpicker communitySelect " multiple="true">
        <option selected value="0">All Communities</option>
     </select>
  </div>
</div>

我尝试克隆此隐藏的div，并尝试在克隆的div中添加/删除selectpicker选项：

 var $pickerdiv = $("div.hidden").clone();
 $pickerdiv.removeClass("hidden");
 $("#maindiv").append($pickerdiv);

 var $communitySelector = $pickerdiv.find(".selectpicker");
 $communitySelector.selectpicker();
 $communitySelector.find('option').remove();
 $communitySelector.selectpicker('refresh');

但是在执行selectpicker刷新方法后，它会在UI上重复：https：//jsfiddle.net/v660Lb4p/8/

那么如何解决呢？

已解决： Bootstrap selectpicker插件自动应用于具有selectpicker类的元素。因此，我删除了该课程，并且...现在可以正常工作！ https://jsfiddle.net/v660Lb4p/16/

Answer 1

当您克隆对象时，您可以根据文档传递其他参数： https://api.jquery.com/clone/#clone-withDataAndEvents

一个布尔值，指示事件处理程序是否应与元素一起复制。从 jQuery 1.4 开始，元素数据也将被复制。

所以我的建议是使用以下行：

 var $pickerdiv = $("div.hidden").clone(true);

https://jsfiddle.net/v660Lb4p/13/