未捕获错误：在初始化之前无法调用按钮上的方法;试图调用方法＆＃39; loading＆＃39;

Question

我将jquery-ui放在第一行文件中后跟bootstrap文件后我仍然收到此错误：

  

未捕获错误：在初始化之前无法调用按钮上的方法;试图调用方法＆＃39; loading＆＃39;。

有人可以帮忙吗？

Answer 1

  

这是由jquery-ui和bootstrap-button插件冲突引起的。在   事实上jquery-ui代码js代码应该在bootstrap.js之前去，那个   解决了这个问题。

     

在bootstrap.js之前插入jquery-ui插件

Answer 2

另一个解决方案是在bootstrap之后添加这一行：

$.fn.btnBootstrap = $.fn.button.noConflict();

然后在调用加载和重置时：

$btn.btnBootstrap('loading');
$btn.btnBootstrap('reset');

Answer 3

该答案基本上与其他建议的答案一致：最后加载引导程序。这个答案只会增加更多信息。

在使用Bootstrap 2.3.2和jQuery UI 1.10时，我已经看到了这一点。如bootstrap bug #6094中所述，他们俩都希望实现：

jQuery(selector).button()

因此装载的最后一个“获胜”。

特别是，如果最后一次加载jQueryUI，则此标准引导程序2.3.2按钮组标记不起作用：

<div class="btn-group" data-toggle="buttons-checkbox">
  <button type="button" class="cm-toggle-btn toggles btn btn-mini active" name="foo">
    Foo
  </button>
  <button type="button" class="cm-toggle-btn toggles btn btn-mini active" name="bar">
    Bar
  </button>
</div>

（它创建一个看起来像这样的按钮组：）

当您单击按钮组中的按钮之一时，将调用jQueryUI的.button()并生成Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'错误。

一个人可以更改顺序并最后加载引导程序，但是jQuery UI的$().button()（因此.slider()和.dialog()也停止了工作）。 ：-（

因为，a，我们都需要工作，所以我们这样做了：由于其他原因，我们首先加载jQueryUI很复杂，因此围绕jQueryUI，我们提出：

<script>
    let bootstrapButton = jQuery.fn.button;
</script>

<script src="jqueryUIsource.js"></script>

<script>
    jQuery.fn.jQueryUIButton = jQuery.fn.button;
    jQuery.fn.button = bootstrapButton;
</script>

然后，在需要jQueryUI引导的页面部分中，将.button()临时恢复jQueryUI的jQuery.fn.jQueryUIButton实现（存储在jQuery.fn.button中）。这是一个杂乱的hack，但可以工作。我想如果要在同一个页面上同时加载它们，我们会做得更好。

此codepen证明可以投入使用。

Answer 4

我不知道在什么情况下会出现此消息。使用此代码时，我也遇到了类似的情况：

HTML：

<button class="btn btn-primary" type="submit" id="update" data-loading-text="Processing <i class='fa fa-spinner fa-spin'></i>">Przelicz <span class="glyphicon glyphicon-play-circle"></span></button>

JAVASCRIPT：

$('body').on('click', '#update', function(e) {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
    $this.button('reset');
}, 8000);
}

我以不同的方式解决了这个问题：

JAVASCRIPT：

$('body').on('click', '#update', function(e) {
var html = $(this).data('loading-text');
$(this).html(html);
}

我认为，如果不能100％解决您的问题，可能会以另一种方式解决该问题。

Answer 5

我使用的引导主题不允许我重新调整bootstrap.js和jquery-ui.js ...虽然发现了，但我的问题是我有一个buttonset（）并且两个div都包含单选按钮和单选按钮的名称相同！我从按钮集div中删除了该名称，它可以正常工作。