javascript - 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 不是响应式(Reactive)的，因为 $('select')将更新所有新添加的 <select> 实例元素。自 $('select').selectpicker()当其他 select 元素尚未添加到 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 甚至可以在将事件注入(inject)到 DOM 之前就将事件绑定(bind)到文档片段中的元素，因此您可以立即初始化插件。我们只需在虚拟 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>