20

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

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

});

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

4

5 回答 5

41

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

于 2015-01-11T19:07:33.847 回答
3

工作示例

这是一个工作示例：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 个跨度的适当内部结构

第二种解决方案

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

于 2013-03-24T11:47:12.130 回答
1

#selected在 jQuery Mobile 初始化之后（使用 DOM 检查器）查看链接元素的 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/

于 2013-03-24T17:32:39.600 回答
0

我遇到了同样的问题，并没有设法找出它发生的原因。但是知道在初始化之后，一个带有“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);
}
于 2013-09-02T21:17:31.990 回答
0

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

于 2016-10-22T13:30:54.650 回答