jQuery 不能在初始化之前调用方法；试图调用方法“刷新”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15597430/
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
Cannot call methods prior to initialization; attempted to call method 'refresh'
提问by Yako
I'd like to update the value of a link-button by clicking on the item of a menu.
我想通过单击菜单项来更新链接按钮的值。
Html:
网址：
<div id="menu">
<ul data-role="listview" data-icon="false">
<li><a href="#">Value A</a></li>
<li><a href="#">Value B</a></li>
</ul>
</div>
<a href="#" id="selected" data-role="button"></a>
jQueryMobile:
jQuery移动：
$('#selected').hide();
$("#menu li a").on('click',function(){
$('#selected').html($(this).html()).slideDown().button("refresh");
});
Text update works fine, but button css is not properly updated.
文本更新工作正常，但按钮 css 未正确更新。
I get the following error:
我收到以下错误：
Uncaught Error: cannot call methods on button prior to initialization; attempted to call method 'refresh'
未捕获的错误：无法在初始化之前调用按钮上的方法；试图调用方法“刷新”
Which initialization are we talking about ? Page and button are already initialized, aren't they?
我们在谈论哪个初始化？页面和按钮已经初始化了，不是吗？
EDIT:
编辑：
I also tried this :
我也试过这个：
$(document).on("mobileinit", function() {
$('#selected').hide();
$("#menu li a").on('click',function(){
$('#selected').html($(this).html()).slideDown().button("refresh");
});
});
No error message any more; but no text update :(
不再有错误信息；但没有文字更新:(
回答by Mwirabua Tim
The issue is sometimes caused by jquery-ui and bootstrap-button plugins conflict. jquery-ui code should go before bootstrap.js, and that solves the problem.
该问题有时是由 jquery-ui 和 bootstrap-button 插件冲突引起的。jquery-ui 代码应该放在 bootstrap.js 之前，这样就解决了问题。
回答by Gajotres
Working example
工作示例
Here's a working example: http://jsfiddle.net/Gajotres/BDmex/
这是一个工作示例：http: //jsfiddle.net/Gajotres/BDmex/
HTML :
HTML :
<div id="menu">
<ul data-role="listview" data-icon="false">
<li><a href="#">Value A</a></li>
<li><a href="#">Value B</a></li>
</ul>
</div>
<a href="#" id="selected" data-role="button"></a>
JS :
JS：
$('#selected').hide();
$("#menu li a").on('click',function(){
$('#selected').html('<span class="ui-btn-inner"><span class="ui-btn-text">' + $(this).html() + '</span></span>').slideDown();
});
- You were missing data-role="button" inside a button a tag
- Because button was originally created without the text you need to add appropriate inner structure with 2 spans
- 您在按钮和标签中缺少 data-role="button"
- 因为按钮最初是在没有文本的情况下创建的，所以您需要添加具有 2 个跨度的适当内部结构
Second solution
第二种解决方案
There's another solution to this problem and it can be found in this ARTICLE+ description and working example.
这个问题还有另一种解决方案，可以在这篇文章+描述和工作示例中找到。
回答by Jasper
Take a look at the HTML structure of your #selectedlink element after jQuery Mobile has initialized it (using a DOM inspector). The actual text is inside a span element with the ui-btn-textclass. So when you update the HTML of the button with the .html()function, you're overwriting the HTML structure that jQuery Mobile created, thereby removing the formatting that jQuery Mobile added.
#selected在 jQuery Mobile 初始化链接元素后（使用 DOM 检查器）查看它的 HTML 结构。实际文本位于具有ui-btn-text该类的 span 元素内。因此，当您使用该.html()函数更新按钮的 HTML 时，您将覆盖 jQuery Mobile 创建的 HTML 结构，从而删除 jQuery Mobile 添加的格式。
You can select the .ui-btn-textelement that is a descendant of your button to update the text without removing the formatting.
您可以选择作为.ui-btn-text按钮后代的元素来更新文本而不删除格式。
Change this:
改变这个：
$('#selected').html($(this).html()).slideDown().button("refresh");
to this:
对此：
$('#selected').find(".ui-btn-text").html($(this).html()).slideDown();
FYI, here is what an initialized anchor tag button's HTML looks like:
仅供参考，这里是初始化锚标记按钮的 HTML 的样子：
<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">Anchor</span>
</span>
</a>
Source: http://view.jquerymobile.com/1.3.0/docs/widgets/buttons/
来源：http: //view.jquerymobile.com/1.3.0/docs/widgets/buttons/
回答by Plamen
I was having the same problem and did not manage to find out why it occurs. But knowing that after the initialization a span with class 'ui-btn-text' is placed inside the button I workaround it like this:
我遇到了同样的问题，并没有设法找出它发生的原因。但是知道在初始化之后，一个带有“ui-btn-text”类的跨度被放置在按钮内，我像这样解决它：
var button = $("#selected");
var innerTextSpan = button.find(".ui-btn-text");
// not initialized - just change label
if (innerTextSpan.size() == 0) {
button.text(label);
// already initialized - find innerTextSpan and change its label
} else {
innerTextSpan.text(label);
}
回答by semion zloi
I had the same problem that I solved by deleting 2 "" final html, so I think it is an imperfection in the html destination page
我有同样的问题，我通过删除 2"" 最终 html 解决了这个问题，所以我认为这是 html 目标页面中的一个缺陷
