$().selectpicker() 不是 Bootstrap Select 创建动态元素的函数答案

【问题标题】：$().selectpicker() Not a Function on Dynamic Element Creation by Bootstrap Select$().selectpicker() 不是 Bootstrap Select 创建动态元素的函数
【发布时间】：2017-03-13 15:36:57
【问题描述】：

我在下拉列表中使用引导选择。

如果我在加载时设置列表，它会很好用。

示例：

<div class="col-md-6" id="target">
               <select class="selectpicker" id="select-picker" multiple>
                      <option>Sunday</option>
                      <option>Monday</option>
                      <option>Tuesday</option>
                      <option>Wednesday</option>
                      <option>Thursday</option>
                      <option>Friday</option>
                      <option>Saturday</option>
                </select>
</div>

如果我尝试动态启用该元素并刷新选择器，

  var data = '<div class="col-md-6"><select name="date[]" class="selectpicker" multiple>'+
             '<option>Sunday</option><option>Monday</option>' +
                '<option>Tuesday</option><option>Wednesday</option>' +
              <option>Thursday</option><option>Friday</option><option>Saturday</option></select></div>';

 $('#target').append(data);

 $('.selectpicker').selectpicker('refresh');

它会产生错误，

  TypeError: $(...).selectpicker is not a function

这段代码有什么问题？

( "Selectpicker" 在加载时工作正常，它不支持仅动态元素。)

【问题讨论】：

能否提供Minimal, Complete, and Verifiable example。
@Samuel J Mathew 你现在可以检查一下吗？

标签： javascript jquery dom bootstrap-select

【解决方案1】：

您需要在您的选择中添加一个类selectpicker。此外，您错过了data 变量定义最后一行的引号。它应该是这样的：

var data = '<div class="col-md-6"><select name="date[]" class="selectpicker" multiple>'+
         '<option>Sunday</option><option>Monday</option>' +
         '<option>Tuesday</option><option>Wednesday</option>' +
         '<option>Thursday</option><option>Friday</option><option>Saturday</option></select></div>';

Here 是一个有效的 jsFiddle 演示。

【讨论】：

【解决方案2】：

编辑：我之前也遇到过类似的错误

TypeError: $(...).selectpicker 不是函数

这是因为我加载了 jQuery 两次。在第二次加载 jQuery 库后，所有在 jQuery 命名空间上注册的插件都消失了。所以这可能是这里的问题。

此外，您正在通过类名访问元素，但您没有在动态 HTML 中提供类名

试试

var data = '<div class="col-md-6"><select name="date[]" class="selectpicker" multiple>'+
             '<option>Sunday</option><option>Monday</option>' +
             '<option>Tuesday</option><option>Wednesday</option>' +
             '<option>Thursday</option><option>Friday</option><option>Saturday</option></select></div>';

通知

class="selectpicker"

【讨论】：

是的，我解决了这个问题，但问题是“selectpicker not a function”错误。我还有这个。
确保正确呈现 HTML。检查元素并查看 HTML 是否正确
但它指定为“selectpicker”不是函数！
在这种情况下，加载脚本可能有问题。确保您没有两次加载 jQuery，因为如果您第二次加载它，所有其他插件将停止使用您列出的错误消息。