在jQuery移动按钮上调用按钮("刷新")会破坏按钮样式

Question

我正在尝试动态更新jQuery移动按钮上的文本.该按钮实际上是一个设置为按钮的链接.

根据jQuery移动文档,button("refresh")如果您通过javascript操作按钮,则应该调用.然而,当我这样做时,按钮的风格变得疯狂 - 它缩小到半高,按钮看起来很糟糕.

这是一个JS小提琴,它演示了这个问题.

代码基本如下:

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    // Change text on click
    $button.click(function() {
        $button.text("Awesome Button");
        $button.button("refresh");
    });
});

更重要的是,调用button("refresh")会导致javascript错误:Cannot call method 'removeClass' of undefined.

我知道我可以通过操纵.ui-btn-text span嵌套在按钮内部来解决这个问题 ; 然而,这似乎是错误的方法,因为它需要明确了解jquery Mobile的内部工作原理.

任何人都可以告诉我如何让刷新调用工作？

使用版本:

• jQuery 1.9.1
• jQuery Mobile 1.3.0(在JSFiddle中它是1.3.0 beta,但最终有相同的行为).

谢谢!

Answer 1

编辑：

抱歉，读得太快，没有看到您正在专门寻找刷新功能。正如您所注意到的，jQM 并未在锚标签按钮上提供此功能。

另一种选择是用新按钮替换按钮，然后让 jQM 像以前一样添加标记

• http://jsfiddle.net/rfdQC/4/

JS

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    var $clone = $button.clone();
    $button.button();

    // Change text on click
    $button.click(function() {
        $clone.text("Awesome Button");
        $clone.button();
        $button.replaceWith($clone);
    });
});

希望这可以帮助！

原来的：

您只需深入了解 jQM 添加的标记即可。

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Click me!
        </span>
    </span>
</a>

您正在更改按钮文本：

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    Awesome Button
</a>

这样做您会失去 jQM 显示按钮所需的添加标记。您需要更改嵌套范围文本。

$(function() {
    // Buttonize
    var $button = $("#myCrapButton");
    $button.button();

    // Change text on click
    $button.click(function() {
        $button.children().children().text("Awesome Button");
    });
});

无需刷新：

<a id="myCrapButton" href="#" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">
            Awesome Button
        </span>
    </span>
</a>

实例：

• http://jsfiddle.net/rfdQC/3/