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测试版，但最终有相同的行为）。

谢谢！

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/

Answer 2

没关系;刚刚在文档的顶部找到了这个：

注意：类似按钮的链接具有与之相同的可视选项下面是真正的基于表单的按钮，但有一些重要的差异。基于链接的按钮不是按钮插件的一部分只是使用底层的buttonMarkup插件来生成按钮样式所以表单按钮方法（启用，禁用，刷新）不受支持。如果您需要禁用基于链接的按钮（或任何 element），可以应用禁用的类ui-disabled 用JavaScript来达到同样的效果。

虽然这实际上并没有解决我的问题（如何更新按钮文本） - 至少它解释了为什么不支持“刷新”方法。

修改

我知道我可以直接更新按钮上的文字;我在最初的问题中说了很多：

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

我希望以某种方式避免这种解决方案让“刷新”方法起作用。但是，基于我后来发现的文档片段（并在上面引用过），我意识到使用“刷新”方法不是一种选择。

鉴于此;我仍然希望有另一种方法来更新按钮上的文本而不显式地解决生成的DOM元素（即使用jQM API） - 但据我所知，没有API方法可以这样做。更新DOM元素似乎是实现所需结果的唯一方法。

由@Phil Pafford（$(this).find('span span')）和@ OmarNew2PHP（$button.children().children()）提供的两个选择器（在我看来）是不正确的。是的，它们在上面给出的示例中完美地工作，但是，如果您向按钮添加图标：

<a id="myCrapButton" href="#" data-icon="delete">Click me!</a>

然后jQM添加一个额外的span来显示该图标（为了简洁起见，修剪了锚标记属性）：

<a href="#"> Delete   </a>

使用上面的选择器会将文本添加到内部span标记的两者。这是我希望避免直接更新DOM的另一个例子 - 因为你不能（也不应该）预测jQM将要生成什么。

但是，在一天结束时，看起来更新按钮内部文本的最佳方法是使用我希望避免的方法：

$button.click(function() { $(".ui-btn-text", this).text("Awesome Button"); });

感谢您的回答。

Answer 3

我在这上花了几个小时，最后这对我有用。一种清洁的解决方案。所以，如果你有一个javascript，它在元素中创建了html

<div id="buttonParent">
  <a href='#' id="1_button" data-role="button">Click me</a>
  <a href='#' id="2_button" data-role="button">Another Click me</a>
</div>

然后在下面调用将刷新按钮。

jQuery('#buttonParent').trigger('create');

请注意以下内容不起作用，并提供例外。

jQuery('#1_button').button('refresh')

可以帮助别人喜欢我。这是浪费时间的浪费。 jqm需要修复这个bug。我有一个围绕这些按钮的包装器，用于可折叠设置并且刷新就可以正常工作但是按钮上的这个刷新会导致错误。这非常烦人。

在jQuery移动按钮上调用按钮（“刷新”）会破坏按钮样式

3 个答案: