5

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

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

这是一个演示问题的 JS Fiddle。

代码基本上如下：

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

谢谢！

4

3 回答 3

3

编辑：

抱歉，阅读速度很快，并没有看到您专门寻找刷新功能。正如您注意到的那样，jQM 没有在锚标记按钮上提供该功能。

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

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>

现场示例：

于 2013-03-07T13:12:49.680 回答
2

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

注意：按钮样式的链接具有与下面真正的基于表单的按钮相同的视觉选项，但有一些重要的区别。基于链接的按钮不是按钮插件的一部分，仅使用底层的 buttonMarkup 插件来生成按钮样式，因此不支持表单按钮方法（启用、禁用、刷新）。如果您需要禁用基于链接的按钮（或任何元素），可以使用 JavaScript 自己应用禁用的类 ui-disabled 来实现相同的效果。

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

编辑：

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

我知道我可以通过操作嵌套在按钮内的 .ui-btn-text 跨度来解决这个问题；但是，这似乎是错误的方法，因为它需要明确了解 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="#">
    <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");
});

感谢您的回答。

于 2013-03-06T23:12:38.213 回答
1

我花了几个小时在这上面，最后这对我有用。一种干净的解决方案。因此，如果您有一个在元素中创建以下 html 的 javascript

<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 需要修复这个错误。我在这些按钮周围有一个包装器，用于可折叠集并刷新它工作正常，但这个按钮刷新一直抛出错误。这很烦人。

于 2013-08-31T19:56:31.277 回答