Uncaught Error: не может вызывать методы на кнопке до инициализации; попытался вызвать метод 'loading'

Ответ 1

Это вызвано конфликтами jquery-ui и bootstrap-button. В код jquery-ui кода js должен идти до bootstrap.js, и это решает проблему.

Просто поместите jquery-ui плагины перед bootstrap.js

Ответ 2

Другим решением является добавление этой строки после бутстрапа:

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

а затем при вызове загрузки и сброса:

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

Ответ 3

Я не знаю, в какой ситуации это сообщение появляется. У меня был подобный, когда я использовал этот код:

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%, это может помочь по-другому обойти ее.

Ответ 4

Этот ответ в основном согласуется с некоторыми другими ответами, которые предлагают: "Загрузите загрузчик последним". Этот ответ просто добавляет больше информации.

Я видел это при использовании Bootstrap 2.3.2 и jQuery UI 1.10. Как описано в ошибке загрузки # 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() тоже) перестают работать. :-(

Так как, увы, нам нужно было и то и другое для работы, мы сделали это: по другим причинам нам было сложно сначала загрузить 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>

А затем, в разделах страницы, где требовался загрузчик jQueryUIs, временно восстановите реализацию jQueryUI .button() (хранящуюся в jQuery.fn.jQueryUIButton) как jQuery.fn.button. Это грязный хак, но сорта работает. Я не думаю, что мы можем добиться большего успеха, если мы хотим загрузить оба на одной странице.

Этот codepen демонстрирует, что его можно заставить работать.