无法在初始化之前调用方法；试图调用方法“刷新”答案

【问题标题】：Cannot call methods prior to initialization; attempted to call method 'refresh'无法在初始化之前调用方法；试图调用方法“刷新”
【发布时间】：2013-03-24 10:37:45
【问题描述】：

我想通过单击菜单项来更新链接按钮的值。

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：

$('#selected').hide();

$("#menu li a").on('click',function(){
    $('#selected').html($(this).html()).slideDown().button("refresh");
});

文本更新正常，但按钮 css 未正确更新。

我收到以下错误：

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

我们在谈论哪个初始化？页面和按钮已经初始化了，不是吗？

编辑：

我也试过这个：

$(document).on("mobileinit", function() {

    $('#selected').hide();

    $("#menu li a").on('click',function(){
        $('#selected').html($(this).html()).slideDown().button("refresh");
    });

});

没有错误信息了；但没有文字更新:(

【问题讨论】：

使用pagebeforeshow’ or pageshow`代替mobileinit。
这样更好：我得到一个全宽按钮；但仍然缺少填充。
@Yako 请检查我的回答，如果有帮助请接受...

标签： jquery html css jquery-mobile button

【解决方案1】：

这个问题有时是由 jquery-ui 和 bootstrap-button 插件冲突引起的。 jquery-ui 代码应该放在 bootstrap.js 之前，这样就解决了问题。

【讨论】：

这为我修好了。
谢谢！这对我来说也是如此。为我节省了大量的头痛时间。 :)

【解决方案2】：

工作示例

这是一个工作示例：http://jsfiddle.net/Gajotres/BDmex/

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：

$('#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();
});

您在按钮标签中缺少 data-role="button"
因为按钮最初是在没有文本的情况下创建的，所以您需要添加具有 2 个跨度的适当内部结构

第二种解决方案

这个问题还有另一种解决方案，可以在 ARTICLE + 描述和工作示例中找到。

【讨论】：

丢失的数据角色是一个错字；谢谢。我也可以使用 $('#selected .ui-btn-text').html('newText');但我担心依赖 jQueryMobile 类可能会导致新版本出现问题。有没有一种更持久的刷新方式？
方法 button() 或 button('refresh') 只有在新创建按钮时才有意义。在您的情况下，您已经形成了按钮，但没有内部跨度元素。此时 button() 不会做任何事情。这就是我添加 span 元素的原因。此外，您不能只将其添加到 ui-btn-text 中，因为如果在没有文本的情况下创建按钮，则它不存在。
确实，按钮 DOM 是在页面加载时使用 data-role=button 创建的（按钮是静态的）。但是当文本内容更新时，css 样式会丢失。您是否暗示更改按钮内容时会删除创建的 DOM？

【解决方案3】：

在 jQuery Mobile 初始化后查看 #selected 链接元素的 HTML 结构（使用 DOM 检查器）。实际文本位于带有 ui-btn-text 类的 span 元素内。因此，当您使用 .html() 函数更新按钮的 HTML 时，您将覆盖 jQuery Mobile 创建的 HTML 结构，从而删除 jQuery Mobile 添加的格式。

您可以选择按钮的后代.ui-btn-text 元素来更新文本而不删除格式。

改变这个：

$('#selected').html($(this).html()).slideDown().button("refresh");

到这里：

$('#selected').find(".ui-btn-text").html($(this).html()).slideDown();

仅供参考，这是初始化锚标记按钮的 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>

来源：http://view.jquerymobile.com/1.3.0/docs/widgets/buttons/

【讨论】：

【解决方案4】：

我遇到了同样的问题，但没有设法找出它发生的原因。但是知道在初始化之后，一个带有类 '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);
}

【讨论】：

【解决方案5】：

我有同样的问题，我通过删除 2"" final html 解决了，所以我认为这是 html 目标页面中的一个缺陷

【讨论】：