Javascript 未捕获的错误：无法在初始化之前调用按钮上的方法；试图调用方法“加载”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30190437/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'loading'
提问by cathy123
After I placed the jquery-ui in first line file followed by bootstrap file I'm still getting this error:
在我将 jquery-ui 放在第一行文件中，然后是引导文件后，我仍然收到此错误：
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'loading'.
未捕获的错误：无法在初始化之前调用按钮上的方法；试图调用方法“加载”。
Can anyone help?
任何人都可以帮忙吗？
回答by Sonam
It's caused by jquery-ui and bootstrap-button plugins conflict. In fact jquery-ui code js code should go before bootstrap.js, and that solves the problem.
它是由 jquery-ui 和 bootstrap-button 插件冲突引起的。实际上 jquery-ui 代码 js 代码应该放在 bootstrap.js 之前，这样就解决了问题。
Just put jquery-ui plugins before bootstrap.js
只需将 jquery-ui 插件放在 bootstrap.js 之前
回答by Keyne Viana
Another solution is to add this line after bootstrap:
另一种解决方案是在引导后添加这一行：
$.fn.btnBootstrap = $.fn.button.noConflict();
and then when calling the loading and reset:
然后在调用加载和重置时：
$btn.btnBootstrap('loading');
$btn.btnBootstrap('reset');
回答by tkartas
I do not know in what situation this message appears. I had a similar one when I used this code:
我不知道在什么情况下会出现此消息。当我使用此代码时，我有一个类似的：
HTML:
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);
}
I solved this problem differently:
我以不同的方式解决了这个问题：
JAVASCRIPT:
爪哇脚本：
$('body').on('click', '#update', function(e) {
var html = $(this).data('loading-text');
$(this).html(html);
}
I think that if it does not solve your problem in 100% it may help in another way to get around it.
我认为，如果它不能 100% 解决您的问题，它可能会以另一种方式帮助您解决问题。
回答by Peter V. M?rch
This answer is basically in line with some of the other answers that suggest: Load bootstrap last. This answer just adds more information.
这个答案基本上与其他一些建议的答案一致：最后加载引导程序。这个答案只是增加了更多信息。
I've seen this when using Bootstrap 2.3.2 and jQuery UI 1.10. As described in bootstrap bug #6094they both want to implement:
我在使用 Bootstrap 2.3.2 和 jQuery UI 1.10 时看到了这一点。如引导程序错误 #6094 中所述，他们都希望实现：
jQuery(selector).button()
And so the one that gets loaded last "wins".
所以最后加载的那个“获胜”。
And so specifically, if jQueryUI is loaded last, then this standard bootstrap 2.3.2 button group markup doesn't work:
特别是，如果 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>
(it creates a button group that looks like this:)
（它创建了一个看起来像这样的按钮组：）
When you click on one of the buttons in the button group, jQueryUI's .button()is called and generates the Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'error.
当您单击按钮组中的一个按钮时，jQueryUI 将.button()被调用并生成Error: cannot call methods on button prior to initialization; attempted to call method 'toggle'错误。
One can change the order and load bootstrap last, but then jQuery UI's $().button(), (and hence .slider()and .dialog()too) stop working. :-(
人们可以最后更改顺序和负载引导，但随后的jQuery UI的$().button()，（因此.slider()和.dialog()太）停止工作。:-(
Since, alas, we needed both to work, we did this: For other reasons, it was complicated for us to load jQueryUI first, so around jQueryUI, we put:
因为，唉，我们需要两者都工作，所以我们这样做了：由于其他原因，我们首先加载 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>
And then, in the sections of the page where jQueryUIs bootstrap was required, temporarily re-instate jQueryUI's .button()implementation (stored in jQuery.fn.jQueryUIButton) as jQuery.fn.button. It is a messy hack but sorta works. I don't think we can do better if we want to load both on the same page.
然后，在需要 jQueryUI 引导程序的页面部分中，将 jQueryUI 的.button()实现（存储在 中jQuery.fn.jQueryUIButton）临时重新设置为jQuery.fn.button。这是一个凌乱的黑客，但有点工作。如果我们想在同一页面上加载两者，我认为我们不能做得更好。
This codependemonstrates that it can be brought to work.
该代码笔表明它可以投入使用。
回答by Scott
I am using a bootstrap theme that didn't allow me to re-adjust bootstrap.js and jquery-ui.js... figured it out though, my problem was I had a buttonset() and both the div containing the radio buttons AND the radio buttons had the same name! I removed the name from the buttonset div and it works.
我正在使用一个引导程序主题，它不允许我重新调整 bootstrap.js 和 jquery-ui.js ......不过想通了，我的问题是我有一个 buttonset() 并且两个 div 都包含单选按钮并且单选按钮具有相同的名称！我从按钮组 div 中删除了名称，它可以工作。
