使用jQuery更改jQuery Mobile按钮的值

Question

想请教一个问题，我似乎在使用jQuery来更改jQuery Mobile按钮的文本时遇到了问题。

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

之前相关问题中推荐的代码似乎不起作用。

这个也不行：

$("#myButton").attr(value,"New Test");

My Button 的代码如下：

<input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next"></button>

各位，我会非常感激任何反馈。谢谢。

- L-Samuels

---

我已经更新了我的答案 - 我之前的工作是基于错误的假设，即标记语言会相似 - 实际上并不是这样的。我提供了一个可行的示例，展示如何使用“input”按钮来实现此功能。 - no.good.at.coding

正确答案在这里：https://dev59.com/i2865IYBdhLWcg3wEKOZ#7279843 - Priyank Bolia

Answer 1

由于jQuery mobile会在你的元素周围生成HTML代码，因此你看到的文本实际上不是按钮的值，而是一个生成的元素内部的文本。你可以遍历DOM来查找实际的元素，或者通过调用.button("refresh")告诉jQuery重新生成按钮的HTML代码，如下所示：

$("#MyButton").val("changed value");
$("#MyButton").button("refresh");

建议使用后者，因为它将与未来版本的 jQuery Mobile 兼容，而遍历 DOM 可能会破坏代码，如果 jQuery 团队选择更改按钮生成的 HTML 结构。

- kovač

---

这对我不起作用，并产生以下错误：未捕获的错误：无法在初始化之前调用按钮方法；尝试调用方法“refresh”。 - Yako

Answer 2

更新2
我正在为另一个问题准备一个JSFiddle，我注意到在使用jQuery Mobile 1.0b2时，标记略有不同：

<div data-theme="b" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-b ui-btn-hover-b" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">Show Submit Button</span>
    </span>

    <input type="button" name="answer" id="myButton" data-theme="b" data-answer="4" value="next" class="ui-btn-hidden" aria-disabled="false">
</div>

使用这个标记，你需要按照以下步骤更改按钮文字：

$('#myButton').prev('span').find('span.ui-btn-text').text("Next Text"); 

---

更新
功劳归于那些应得的人 - 事实证明，在我修改我的原始答案之前，@naugtur对这个问题的回答已经提出了与我的编辑完全相同的观点。

---

我不太熟悉jQuery Mobile，当我最初回答时，并没有意识到你正在使用一个<input>作为按钮。这是我的更新答案，其中包含一个工作示例，展示了如何进行操作。

在<input type="button" />的情况下，jQuery Mobile似乎隐藏了<input>元素，并创建了一个新的<a>元素，该元素被设计成看起来像按钮。这就是为什么当您尝试使用<input>的id作为选择器来获取和设置文本时，它不起作用的原因，因为那个<span>没有您在屏幕上看到的文本。生成的标记看起来像这样：

<!-- This 'a' button is added dynamically by jQuery Mobile, for the input element that follows it -->
<a role="button" href="#" data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text">My Value</span>
    </span>
</a>

<input type="button" data-role="button" value="My Value" id="myButton" name="answer" class="ui-btn-hidden ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow" tabindex="-1" data-theme="c">
    <span class="ui-btn-inner ui-btn-corner-all">
        <span class="ui-btn-text"></span>
    </span>
</input>

我还没有尝试足够的示例来完全确信，但这应该可以工作

$("#myButton").prev('a').find('span.ui-btn-text').text("New Text")

这里有一个工作示例，展示了如何更改两种类型按钮的文本（链接按钮和）。如果可以避免使用按钮，我不建议使用此方法，因为它没有id，而且我的方法依赖于与相对应的元素紧随其后。

- no.good.at.coding

---

最终我找到了问题所在。尽管<input type="button" name="answer" id="a_but" data-theme="b" data-answer="4" value="old Text">呈现的按钮与<a href="" data-role="button" id="a_but">old Text</a>相同，但后者允许您使用$("#a_but .ui-btn-text").text("new text");更改按钮文本。 - L-Samuels

@Lawrence88 对于之前不相关的回答我表示道歉 - 你是对的关于行为差异，可以看一下我更新的答案，解释了标记的差异以及为什么这对于从<input>元素创建的按钮不起作用，并提供一个解决方法，展示如何仍然可以实现它。 - no.good.at.coding

是的，谢谢@no.good。那解释得很清楚。匿名的反对？我不明白你的意思。你是在说我给你点了踩吗？ - L-Samuels

@Lawrence88，有人给我的上一个回答投了反对票，但没有说明原因。那个评论不是针对你的[除非是你投的反对票：)] - 而是针对那个投票者的 - 没什么大不了的！ - no.good.at.coding

这里的正确方法是在 DOM 更新后运行 $('#myButton').button('refresh')，请参见 @kovac 的说明。 - Steven de Salas

Answer 3

[不推荐使用]

使用按钮输入的缺点是无法以一种能够传播到jquerymobile按钮的方式更改输入的属性。那么只有一种方法：

$('#myButton').parent().find('.ui-btn-text').text('zzzzz');

如果input按钮在没有任何javascript的情况下无法使用应用程序（或者您不希望它在没有javascript的情况下工作），则应始终使用<a>标签，因为它们可以是容器。

- naugtur

---

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

但问题仍然存在（我几天前正在寻找答案），当我偶然看到这篇文章时。下面的Kovac是正确的。 - Steven de Salas

Answer 4

这对我有效：

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

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

- Yuval A.

Answer 5

使用jquery.mobile-1.1.0时，我经历了一些稍微不同的问题，并且在浏览众多答案时遇到了困难。下面我记录了我遇到的问题和找到的解决方案。

代码段1：

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').html("Check-in to receive points");
  });
</script>

通过这个方法，我可以改变文本，但是该方法会清除添加的跨度和类，从而压缩按钮。

HTML

<div id="task_button">
 <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
 Check-in to receive points
 </a>
 </div>

代码片段 2

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points");
  });
</script>

这对按钮文本没有影响。

HTML

<div id="task_button">
  <a data-role="button" id="checkin_button" data-transition="slide" data-theme="b" href="#task-success" data-icon="check" data-corners="true" data-shadow="true" data-iconshadow="true" data-iconsize="18" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-icon-left ui-btn-up-b">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">
      Original Text.
      </span>
    <span class="ui-icon ui-icon-check ui-icon-shadow ui-iconsize-18">&nbsp;
 </span>
</span>
</a>
</div>

代码片段 3

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button').val("Check-in to receive points").button("refresh");
  });
</script>

这会生成以下错误信息:

无法在初始化之前调用按钮上的方法;尝试调用方法“refresh”

这让我很困惑，因为该函数仅在页面初始化后才被调用。继续阅读，我注意到Priyank在stackoverflow.com/a/7279843/61821引用了一个可行的答案。

片段4-工作

<script type="text/javascript">
 $('#task').live('pageinit', function() {
    $('#checkin_button .ui-btn-text').val("Check-in to receive points");
  });
</script>

更好的jQuery选择器运行得非常完美。

- cluther

Answer 6

这很容易，有一个方法可以做到，button('refresh')

$('#mybutton').val('new Value').button('refresh');

祝你好运！

- josue alvarez

Answer 7

更新以下内容适用于我（类似于 kovač 的答案）：

$('#MyButton').html('changed value').button('refresh');

或者

$("#MyButton").val("changed value").button("refresh");

- brodybits