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

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

根据jQuery移动文档，如果你通过javascript操作按钮，你应该调用button("refresh")。然而，当我这样做时，按钮的风格变得很疯狂 - 它缩小到一半高度，按钮看起来很垃圾。

这是一个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的内部工作原理。

谁能告诉我如何让刷新调用工作？

使用版本：

j查询 1.9.1
(在JSFiddle中是1.3.0测试版，但最终版本具有相同的行为(。

谢谢！

编辑：

抱歉快速阅读，没有看到您专门寻找刷新功能。正如您注意到的那样，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/

没

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

注意：样式类似于按钮的链接具有与下面是真正的基于表单的按钮，但有一些重要的按钮差异。基于链接的按钮不是按钮插件的一部分，并且只需使用底层按钮标记插件即可生成按钮样式，以便表单按钮方法(启用、禁用、刷新( 不受支持。如果您需要禁用基于链接的按钮(或任何元素(，可以应用禁用类 UI-禁用自己用JavaScript来达到同样的效果。

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

编辑：

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

我知道我可以通过操纵嵌套在按钮内的 .ui-btn-文本跨度;然而，这似乎喜欢错误的方法，因为它需要明确了解 jquery Mobile的内部工作原理。

我希望通过以某种方式使"刷新"方法起作用来避免此解决方案。但是，根据我后来发现的文档片段(并在上面引用(，我意识到使用"刷新"方法不是一种选择。

鉴于此;我仍然希望有另一种方法可以在不明确解决生成的 DOM 元素的情况下更新按钮上的文本(即通过使用 jQM API( - 但据我所知，没有 API 方法可以这样做。更新 DOM 元素似乎是实现所需结果的唯一方法。

@Phil帕福德($(this).find('span span')(和@OmarNew2PHP($button.children().children()(提供的选择器(在我看来(都是不正确的。是的，它们在上面给出的示例中完美运行，但是，如果您向按钮添加图标：

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

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

<a href="#">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Delete</span>
        <span class="ui-icon ui-icon-delete ui-icon-shadow">&nbsp;</span>
    </span>
</a>

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

但是，归根结底，更新按钮内文本的最佳方法是使用我希望避免的方法：

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

感谢您的回答。

我花了几个小时，最后这对我有用。一种干净的解决方案。所以，如果你有一个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 需要修复此错误。我在这些按钮周围有一个包装器，用于可折叠集和刷新，效果很好，但这个刷新按钮不断抛出错误。这很烦人。

相关内容

最新更新

热门标签：