调用jQuery移动按钮上的按钮(“刷新")会破坏按钮样式 [英] Calling button("refresh") on a jQuery mobile button breaks the button style

问题描述

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

I'm trying to dynamically update the text on a jQuery mobile button. The button is actually a link which is styled as a button.

根据 jQuery移动文档，如果您要使用button("refresh")通过javascript操作按钮.但是，当我这样做时，按钮的样式却变得疯狂起来-它缩小到一半的高度，按钮看起来很烂.

According to the jQuery mobile documentation, you should call button("refresh") if you manipulate the button via javascript. However, when I do this, the button's style goes a but crazy - it gets shrunk to half-height and the button looks crap.

这是一个演示问题的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.

What's more, calling button("refresh") causes the javascript error: Cannot call method 'removeClass' of undefined.

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

I know that I can work around this problem by manipulating the .ui-btn-text span that's nested inside the button; however, this seems like the wrong approach as it requires explicit knowledge of the internal workings of jquery Mobile.

有人可以告诉我如何使刷新呼叫生效吗?

Can anyone tell me how to get the refresh call to work?

使用版本:

• jQuery 1.9.1
• jQuery Mobile 1.3.0(在JSFiddle中为1.3.0 beta，但最终版本具有相同的行为).

谢谢！

推荐答案

抱歉，阅读速度很快，没有看到您在专门寻找刷新功能.您已经注意到jQM没有在锚标记按钮上提供该功能.

Sorry read to fast and didn't see that you were looking specifically for the refresh functionality. As you hav noticed jQM doesn;t offer that on the anchor tag buttons.

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

Well an alternative is just to replace the button with a new one and let jQM add the markup as before

• 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添加的添加标记.

You just need to drill down into the added markup that jQM adds.

<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需要显示该按钮. 您需要更改嵌套的跨度文本.

Doing this you loose the added markup jQM needs to display the button. You need to change the nested span text.

$(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/

这篇关于调用jQuery移动按钮上的按钮(“刷新")会破坏按钮样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！