jQuery Mobile更改按钮文本

Question

我正在使用最新的jQuery Mobile 1.0 alpha 1版本构建一个移动应用程序，需要能够切换按钮的文本。 切换文本可以正常工作，但一旦执行文本替换，CSS格式就会被破坏。

格式混乱的截图：http://awesomescreenshot.com/03e2r50d2

    <div class="ui-bar">
        <a data-role="button" href="#" onclick="Podcast.play(); return false" id="play">Play</a>
        <a data-role="button" href="#" onclick="Podcast.download(); return false" id="download">Download</a>
        <a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">Mark Old</a>
    </div>

$("#consumed").text("Mark New");

- Josh Rickard

---

为什么你在HTML中使用onclick而不是用jQuery？ - naugtur

Answer 1

当您创建按钮时，它会添加一些额外的元素，一些内部的<span>元素，看起来像这样:

<a data-role="button" href="#" onclick="Podcast.consumed(); return false" id="consumed">
  <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Mark Old</span>
  </span>
</a>

要更改文本，您需要使用此选择器：

$("#consumed .ui-btn-text").text("Mark New");

- Nick Craver

---

应该有更好的方法来实现这一点，比如使用 $('ul').listview('refresh'); 调用来更新列表。虽然所描述的方式可以工作，但它考虑了元素最终布局的内部知识。这个实现细节可能会在将来发生变化。但由于 jQuery Mobile 仍处于 alpha 阶段，对于实用的解决方案给予加分。 - Jordão

我遇到了这个问题，因为最初的问题有点误导（尼克的答案是正确的）。但我想补充一下，对于其他人查找相同问题并使用 <button> 元素时，该方法不起作用，只适用于带有 data-role="button" 的 <a>，另请参见 https://github.com/jquery/jquery-mobile/issues/2544。 - Mathias Conradt

在DOM更新后，正确的方法是运行$('#myButton').button('refresh')。 - Steven de Salas

@StevendeSalas - 在回答时，这不是行为，它没有影响 - 在这种情况下，您应该编辑答案以指示库中已添加了更新/更好的方法。 - Nick Craver

我在投票反对时添加了正确的答案，它在底部不被注意到。 - Steven de Salas

这是一个不太稳定的解决方案，因为如果jquerymobile更改了类名会怎样...但它能用。 - shaharsol

Answer 2

<a data-role="button" href="#" id="consumed">Mark Old</a>

你想要：

$('#consumed').text('Mark New');
$('#consumed').button('refresh');

这样做的原因是为了使您所做的更改能够向后兼容 jQuery Mobile 的未来版本。

- Steven de Salas

---

当我尝试这个方法（Firefox 12.0）时，它会出现“未捕获的异常：无法在初始化按钮之前调用方法；尝试调用方法'refresh'”的错误。 接受的答案对我有用。 使用jQM 1.1.0和jQ 1.7.1。 - PahJoker

尽管被接受的答案可以工作，但它有点笨拙，你应该尽可能使用jQuery API以确保未来的兼容性。在按钮被初始化后，这个答案将正常工作，确保你将代码包装在 $(document).ready(function() { ... }); 中。 - Steven de Salas

即使按钮已初始化，此代码仍无效。http://jsfiddle.net/4Bgx7/1405/ - Alejo

我正在进行负面评价，因为这被推销为正确的解决方案，但根据jQuery Mobile文档本身，这对于链接按钮是行不通的。引用文档：“基于链接的按钮不是按钮插件的一部分，只是使用底层的buttonMarkup插件生成按钮样式，因此不支持表单按钮方法（启用、禁用、刷新）。” - Justin Holzer

我会使用val，而不是text：$('#consumed').val('Mark New'); $('#consumed').button('refresh'); - Googol

Answer 3

我阅读了这篇文章和网上的各种选项，认为我可能有一个更简单的解决方案。对于使用data-role="button"属性将链接转换为按钮的情况，它绝对可行。

只需在一个单独的标签中放置按钮的文本，然后在JavaScript中更改该标签的内容即可。

例如：

<a data-role="button" href="#" id="consumed"><span id="oldBtnText">Mark Old</span></a>

那么，一个简单的

$('#oldBtnText').html("Old");

可以胜任此工作。如果jQuery更改其结构，也不应成为问题。

- Britic

---

这是在 jQM 1.4.0 中唯一有效的方法。我没有看到 Nick 在他的答案中提到的嵌套 span。 - DOK

B-E-A-U-T-I-F-U-L。这就像那个昂贵的钢笔可以在太空中使用，而铅笔则不行的笑话一样。 - Adway Lele

Answer 4

我写了一个简单的插件，可以为基于链接的按钮或<input type="button">类型的按钮实现此功能。所以如果您有这样的需求：

<input type="button" id="start-button" val="Start"/>

或者

<a href="#" data-role="button" id="start-button">Start</a>

无论哪种方式，您都可以使用以下方法更改显示的文本：

$("#start-button").changeButtonText("Stop");

这是插件：

(function($) {
    /*
     * Changes the displayed text for a jquery mobile button.
     * Encapsulates the idiosyncracies of how jquery re-arranges the DOM
     * to display a button for either an <a> link or <input type="button">
     */
    $.fn.changeButtonText = function(newText) {
        return this.each(function() {
            $this = $(this);
            if( $this.is('a') ) {
                $('span.ui-btn-text',$this).text(newText);
                return;
            }
            if( $this.is('input') ) {
                $this.val(newText);
                // go up the tree
                var ctx = $this.closest('.ui-btn');
                $('span.ui-btn-text',ctx).text(newText);
                return;
            }
        });
    };
})(jQuery);

因为在代码中过多地依赖jQuery Mobile渲染按钮并不是一个好主意。编程规则：如果你必须使用hack，就将其隔离到一个良好记录和可重用的代码块中。

- Leopd

---

我喜欢这个解决方案，因为如果在jQuery Mobile中更改了类.ui-btn-text，那么只需要更改几行代码而不是一堆HTML和JavaScript代码。 - Libby

最佳解决方案，运行得非常好，正如Libby所指出的那样，通过抽象使得这个hack变得更加清晰。 - Priyank Bolia

Answer 5

这对我有效：

$('#idOfOriginalButton').prev('.ui-btn-inner').children('.ui-btn-text').html('new text');

解决方案来自: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

该问题的解决方案是使用jQuery中的.text()方法而不是.html()方法来更改按钮文本。.text()方法仅更改元素的文本内容，而不更改任何HTML标记或样式。这确保了更改后的文本显示正确，并且不会破坏现有的HTML结构或样式。

- Yuval A.

---

+1 是因为它允许您在单击按钮时更改文本。 $（“button”）.bind（“click”，function（event，ui）{ $（this）.prev（'.ui-btn-inner'）.children（'.ui-btn-text'）.html（'新文本'）; 返回假; }）; - styfle

Answer 6

对于像

这样的标记

<button id="consumed">Mark Old</button>

$("#consumed").html("Mark New");
$("span > span", $("#consumed").parent()).html("Mark New");

- Vikas

Answer 7

由于某些原因，我第一次想更改按钮文本时没有'ui-btn-text'类的span。所以我像这样解决它：

var button = $("#consumed");
var innerTextSpan = button.find(".ui-btn-text");

// not initialized - just change label
if (innerTextSpan.size() == 0) {
    button.text(label);

// already initialized - find innerTextSpan and change its label    
} else {
    innerTextSpan.text(label);
}

- Plamen

Answer 8

从JQM 1.3.1开始（也许更早？）支持简单的.text()。

- Peter

Answer 9

在新的jQuery Mobile版本中，按钮内部有一个内部span标签。

因此，您不需要更改'a'标签的文本，而是需要更改内部span的文本。

例如： $("#consumed .ui-btn-text").text("test");

- letsdev-cwack

Answer 10

对于那些寻求简单解决方案的人，我创建了一个名为Audero Text Changer的插件。

- Aurelio De Rosa