未捕获错误：无法在初始化之前调用按钮上的方法；尝试调用方法“loading”。

Question

在将jquery-ui放在第一行文件中并跟随bootstrap文件后，我仍然遇到这个错误：

未捕获的错误：在初始化之前无法调用按钮上的方法; 尝试调用方法“loading”。

有人能帮忙吗？

- cathy123

---

请将您的代码添加到问题中，尽管错误已经很明显了。 - Rory McCrossan

能否请您展示一些代码？ - Akshay Khandelwal

尝试先实现jQuery，然后是jQueryUI，最后是bootstrap。 - kosmos

Answer 1

这是由于jquery-ui和bootstrap-button插件之间的冲突所致。实际上，jquery-ui JS代码应该放在bootstrap.js之前，这样就可以解决问题。

只需将jquery-ui插件放在bootstrap.js之前即可。

- Sonam

---

但也有https://dev59.com/UVoU5IYBdhLWcg3wFEE6 - VGranin

这可能会导致 https://dev59.com/YGQm5IYBdhLWcg3wwxLF - Kornél Regius

Answer 2

另一种解决办法是在引入 Bootstrap 后添加以下代码：

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

然后在调用 loading 和 reset 时：

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

- Keyne Viana

---

它说： TypeError: $.fn.button.noConflict不是一个函数 - DigitCart

这应该是被接受的答案。另一个答案会在您的应用程序中引起此问题：https://dev59.com/YGQm5IYBdhLWcg3wwxLF - Kornél Regius

Answer 3

这个答案基本上与其他建议“最后加载bootstrap”的答案一致。这个答案只是添加了更多的信息。

我在使用Bootstrap 2.3.2和jQuery UI 1.10时遇到过这种情况。正如在bootstrap bug #6094中描述的那样，它们都想实现：

jQuery(selector).button()

因此，最后加载的那个“赢得胜利”。

具体而言，如果jQueryUI是最后加载的，则此标准bootstrap 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'错误。

可以更改顺序并最后加载bootstrap，但是然后jQuery UI的$().button()（因此.slider()和.dialog()也）停止工作。 :-(

由于我们需要两者都能正常工作，因此我们做了以下操作：由于其他原因，我们很难首先加载jQueryUI，所以在jQueryUI周围，我们放置了：

Original Answer翻译成"最初的回答"

<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引导程序的页面部分，将jQueryUI的.button()实现（存储在jQuery.fn.jQueryUIButton中）临时恢复为jQuery.fn.button。这是一个混乱的hack，但有点起作用。如果我们想在同一页上加载两者，我认为我们无法做得更好。

这个CodePen演示了它可以被带到工作状态。

- Peter V. Mørch

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%解决你的问题，也可能以其他方式帮助你绕过它。

- tkartas

---

这是我遇到的错误信息：未捕获的错误：无法在初始化之前调用按钮方法；尝试调用方法“loading”。 - tkartas

Answer 5

我正在使用一个 Bootstrap 主题，它不允许我重新调整 bootstrap.js 和 jquery-ui.js...... 不过，我已经弄清楚了，我的问题是我有一个 buttonset()，包含单选按钮的 div 和单选按钮都具有相同的名称！ 我从 buttonset div 中删除了名称，现在它可以工作了。

- Scott