动态创建的选择上的选择器答案

【问题标题】：Selectpicker on dynamically created select动态创建的选择上的选择器
【发布时间】：2018-04-16 20:33:32
【问题描述】：

我在一个有多个选择的表单中使用 bootstrap-select，但我克隆或创建具有新 ID 和相同类的新选择并使用：

$(".selectpicker").selectpicker("render"); or
$(".selectpicker").selectpicker("refresh");

并且新的选择没有得到更新，我也尝试克隆普通选择和创建的引导选择更改 ID 和数据 ID 以及 $(".selectpicker").selectpicker("refresh");，但这不起作用。

如何做到这一点。

更新

这是基本的 HTML，基本上我使用的是 Django 表单集，这里我有一个带有表格的表单，每一行都是一个带有输入和选择的新表单实例。

<tr class="dynamic-form">
 <td class="" style="text-align: center">
  <input type="number" name="caracteristicas-0-ORDER" value="1" id="id_caracteristicas-0-ORDER">
 </td>
 <td class="" style="text-align: center">
  <select name="caracteristicas-0-caract" data-live-search="true" class="form-control selectpicker" id="id_caracteristicas-0-caract" style="display: none;">
  <option value="1" selected="">Nombre</option>
  <option value="2">Ref</option>
  <option value="3">Modelo</option>
 </select>
</td>

Javascript 基本上是这样的：

---- onClickButton ----
row = tr.clone(true); <----- this was the problem
/* clear values, change id's, etc. */
row.insertBefore(lastRow).show();
row.find('.bootstrap-select').remove();
$('.selectpicker').selectpicker("render");

【问题讨论】：

你能把相关的 JavaScript 和 HTML 放到你的问题中吗？
您可能需要在添加新的原始 html 选择框后调用 $(".selectpicker").selectpicker() 以在这些新元素上初始化插件。
不，它不起作用。选择器工作并找到新的 html 选择，但它们不会被 bootstrap-select 更新

标签： javascript jquery ajax twitter-bootstrap bootstrap-select

【解决方案1】：

阅读所有库代码后，问题出在这一行：

row = tr.clone(true);

当您使用clone(true) 时，您将获得元素和所有事件处理程序等的副本。您只需要获得元素结构的干净副本。

所以解决办法是：

row = tr.clone();

【讨论】：