Question

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

当我从追加功能中删除selectpicker类时，它可以工作，但不会加载样式。

＆＃13;

$('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 />');

});

＆＃13;

<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>

＆＃13;

Answer 1

JS在$('select')将使用所有新添加的<select>元素实例进行更新的意义上不具有反应性。由于在没有将其他选择元素添加到DOM时执行$('select').selectpicker()，因此它仅适用于在运行时可用的那些元素 - 这是在那个时刻存在于DOM中的那些元素。 p>

为了初始化新添加的<select>元素的插件，您只需创建一个虚拟<div>元素并将<select>元素附加到其中：

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

现在，您要添加的元素将作为文档片段提供。即使在将事件注入DOM之前，jQuery也能够将事件绑定到文档片段中的元素，因此您可以直接初始化插件。我们只需在虚拟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>

Bootstrap selectpicker无法处理由Javascript / JQuery添加的多个字段

1 个答案: