javascript - 在 jQuery 移动按钮上调用按钮 ("refresh") 会破坏按钮样式

Question

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

根据jQuery mobile documentation ，如果您通过 javascript 操作按钮，则应调用 button("refresh")。然而，当我这样做时，按钮的样式变得非常疯狂 - 它缩小到一半高度并且按钮看起来很糟糕。

Here's a JS Fiddle which demonstrates the problem .

代码基本如下:

$(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 没有在 anchor 标记按钮上提供它。

好吧，另一种方法是用一个新按钮替换按钮，然后让 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/