Bootstrap selectpicker在克隆的div中刷新后重复答案

【问题标题】：Bootstrap selectpicker is duplicated after refresh in cloned divBootstrap selectpicker在克隆的div中刷新后重复
【发布时间】：2017-07-31 12:35:18
【问题描述】：

我有一个引导选择器：

<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');

但是在选择选择器刷新方法之后，它会在 UI 上重复： https://jsfiddle.net/v660Lb4p/8/

那么如何解决呢？

已解决： Bootstrap selectpicker 插件自动应用于具有 selectpicker 类的元素。所以我删除了这个类并且......它现在可以工作了！ https://jsfiddle.net/v660Lb4p/16/

【问题讨论】：

不，不是吗？第二个选择器是空的（根据.remove()）（？）
@UnamataSanatarai 第二个选择器是空的，第一个没有隐藏，OP 期望 clone() 返回对象的克隆，所以 cloneddiv.removeClass("hidden") 不应该影响原始 div跨度>

标签： jquery bootstrap-select bootstrap-selectpicker

【解决方案1】：

我们需要将 selectpicker 类更改为另一个类名，以便解决此问题。我也使用 bootstrap-select 并发现这个问题是因为 selectpicker("refresh")。所以我更改了班级名称，它工作正常。 :-)

这已在 bootstrap-select github 存储库中报告。 https://github.com/snapappointments/bootstrap-select/issues/1413

【讨论】：

【解决方案2】：

当你克隆一个对象时，你可以根据文档传递额外的参数： https://api.jquery.com/clone/#clone-withDataAndEvents

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

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

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

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

【讨论】：

您的方法确实有效，但为什么呢？原版上没有任何事件处理程序或数据元素？
您正在克隆一个 JS-Selectpicker，而不是纯 HTML。所以所有的属性仍然是挂钩的。如果您克隆数据和事件，那么您将获得一个克隆版本，而不是镜像版本。
但现在我无法附加新选项：jsfiddle.net/v660Lb4p/15。为什么？