Bootstrap selectpicker不适用于Javascript / JQuery添加的多个字段

Question

加载 jQuery /javascript 动态字段时，引导选择选择器无法正常工作。

当我从附加函数中删除 selectpicker 类时，它可以工作但不加载样式。

$('select').selectpicker();

$('#add_more').click(function() {

  $('.testBox').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select> <br />');

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">


<a href="javascript:void(0)" id="add_more">Add More</a>
<select class="selectpicker show-tick form-control">
    <option>Safari</option>
    <option>Chrome</option>
    <option>Firefox</option>
</select>

<br /><br />
<div class="testBox"></div>

Answer 1

JS 不是反应式的，因为$('select') 将使用所有新添加的<select> 元素实例进行更新。由于$('select').selectpicker() 是在未将其他选择元素添加到 DOM 时执行的，因此它将仅适用于那些在运行时可用的元素，即当时存在于 DOM 中的元素。

为了为新添加的<select> 元素初始化插件，您可以简单地创建一个虚拟<div> 元素并将您的<select> 元素附加到它：

var $select = $('<div />').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select>');

现在，您要添加的元素将作为文档片段提供。 jQuery 能够在文档片段被注入 DOM 之前将事件绑定到文档片段中的元素，因此您可以立即初始化插件。我们只需在虚拟 div 中搜索您的 <select> 元素：

$select.find('select').selectpicker();

完成后，将其附加到 DOM：

$('.testBox').append($select);

请参阅下面的概念验证示例：

$('select').selectpicker();

$('#add_more').click(function() {
  // Create dummy div that houses select element
  var $select = $('<div />').append('<select class="show-tick form-control"><option>Safari</option><option>Firefox</option><option>Chrome</option></select>');
  
  // Initialize plugin in <select> element found in document fragment
  $select.find('select').selectpicker();
  
  // Append document fragment to your DOM
  $('.testBox').append($select);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">


<a href="javascript:void(0)" id="add_more">Add More</a>
<select class="selectpicker show-tick form-control">
    <option>Safari</option>
    <option>Chrome</option>
    <option>Firefox</option>
</select>

<br /><br />
<div class="testBox"></div>