Question

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

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");
    });

});

不再有错误讯息;但没有文字更新：（

Answer 1

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

Answer 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 +说明和工作示例中找到。

Answer 3

在jQuery Mobile初始化它之后（使用DOM检查器），查看#selected链接元素的HTML结构。实际文本位于具有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/

Answer 4

我遇到了同样的问题，并没有设法找出它发生的原因。但是知道在初始化之后，一个带有'ui-btn-text'类的span放在按钮内，我就像这样解决它：

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);
}

Answer 5

我遇到了同样的问题，我通过删除2＆＃34;＆＃34;最终的HTML，所以我认为这是html目标页面中的不完美

初始化之前无法调用方法;试图调用方法'刷新'

5 个答案:

工作示例

第二种解决方案