使用 jQuery 更改 jQuery 移动按钮的值

Changing the value of a jQuery mobile button using jQuery

提问by L-Samuels

Wondering if you can help me out. I seem to have a problem changing the text of my jQuery Mobile buttons with jQuery.

想知道你是否可以帮助我。我似乎在使用 jQuery 更改 jQuery Mobile 按钮的文本时遇到问题。

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

Code above which was recommended for a related question doesn't seem to work.

上面为相关问题推荐的代码似乎不起作用。

Neither does:

也没有：

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

The code for my button is as followed:

我的按钮的代码如下：

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

I'll appreciate any feedback guys. Thanks

我将不胜感激任何反馈家伙。谢谢

采纳答案by no.good.at.coding

Update 2
I was working on a fiddle for another question and I noticed that the markup with jQuery Mobile 1.0b2 is a little different:

更新 2
我正在研究另一个问题，我注意到 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>

With this markup, you'd need to do the following to change the text for the button:

使用此标记，您需要执行以下操作来更改按钮的文本：

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

---

---

Update
Credit where credit is due- As it turns out, @naugtur's answer to this question, which made exactly the same point as my edit, was posted beforeI got around to correcting my original answer.

在信用到期的地方更新信用- 事实证明，@naugtur 对这个问题的回答与我的编辑完全相同，是在我开始纠正我的原始答案之前发布的。

---

---

I'm not very familiar with jQuery Mobile and the fact that you were using an <input>for the button didn't register when I initially answered. Here's my updated answer with a working example showing how you might do it.

我对 jQuery Mobile 不是很熟悉，而且<input>当我最初回答时没有注册您使用按钮的事实。这是我更新的答案，其中包含一个工作示例，展示了您可能如何做到这一点。

In the case of an <input type="button" />, jQuery Mobile seems to hide the <input>element and creates a new <a>element that is styled to look like the button. This is why when you try to get and set the text by using the id of the <input>as the selector, it doesn't work since that <span>doesn't have the text that you see on screen. The generated markup looks something like this

在 的情况下<input type="button" />，jQuery Mobile 似乎隐藏了该<input>元素并创建了一个<a>样式看起来像按钮的新元素。这就是为什么当您尝试使用 id<input>作为选择器来获取和设置文本时，它不起作用，因为它<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>

I haven't tried out enough examples to be completely confident, but this should work

我还没有尝试足够的例子来完全自信，但这应该有效

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

Here's a working example showing how to change text for both types of buttons(<a>and <input type="button">).

这是一个工作示例，展示了如何更改两种类型按钮（<a>和<input type="button">）的文本。

I wouldn't recommend using this over <a>buttons if you can help it though since there isn't an idand my approach, at least, relies on the fact that the <a>corresponding to the <input type="button" />appears just before the <input>element.

<a>如果您可以提供帮助，我不建议在按钮上使用它，因为没有 anid并且我的方法至少依赖于与<a>对应的<input type="button" />出现在<input>元素之前的事实。

回答by kova?

Since jQuery mobile generates HTML around your input type="button"element, and the text that you're seeing isn't actually value of the button, but a text inside of a generated span. You can either traverse the DOM looking for actual span, OR tell jQuery to re-generate button HTML by calling .button("refresh"), like so:

由于 jQuery mobile 围绕您的input type="button"元素生成 HTML ，并且您看到的文本实际上不是按钮的值，而是生成的span内的文本。您可以遍历 DOM 以查找实际跨度，也可以通过调用 .button("refresh") 告诉 jQuery 重新生成按钮 HTML，如下所示：

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

The latter is recommended, since it will stay compatible with future versions of jQuery mobile, while traversing the DOM might break if jQuery team chooses to change structure of the HTML generated for the button.

推荐使用后者，因为它将与 jQuery mobile 的未来版本保持兼容，而如果 jQuery 团队选择更改为按钮生成的 HTML 的结构，遍历 DOM 可能会中断。

回答by naugtur

[deprecated]

[已弃用]

Using button inputs has this drawback of not being able to change the attributes of an input in a way that would propagate to jquerymobile's button. Then there is only ne way:

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

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

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

If the inputbutton is not necessary to use the application without any javascript present (or you don't want it to work without javascript) then you should always use <a>tags, because they can be containers.

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

回答by Yuval A.

This works for me:

这对我有用：

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

solution from: http://forum.jquery.com/topic/changing-text-works-except-for-buttons

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

回答by cluther

With jquery.mobile-1.1.0 I was experiencing something slightly different and had trouble sifting through the responses to find a workable answer. I've documented the problems I experienced and the solution I found below.

使用 jquery.mobile-1.1.0 时，我遇到了一些稍微不同的情况，并且无法筛选回复以找到可行的答案。我已经记录了我遇到的问题以及我在下面找到的解决方案。

Snippet 1

片段 1

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

With this, I'm able to change the text, but the method clears out the added spans and classes, thus compressing the button.

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

HTML

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>

Snippet 2

片段 2

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

This had no effect upon the button text.

这对按钮文本没有影响。

HTML

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>

Snippet 3

片段 3

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

This generated the following error message:

这生成了以下错误消息：

cannot call methods on button prior to initialization; attempted to call method 'refresh'

不能在初始化之前调用按钮上的方法；试图调用方法“刷新”

Which was confusing to me because this function is being called only after the page is initialized. Reading further, I then noticed Priyank's reference to a working answer at stackoverflow.com/a/7279843/61821

这让我感到困惑，因为仅在页面初始化后才调用此函数。进一步阅读，然后我注意到 Priyank 在 stackoverflow.com/a/7279843/61821 上对工作答案的引用

Snippet 4 - Working

片段 4 - 工作

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

A better jQuery selector works like a charm.

一个更好的 jQuery 选择器就像一个魅力。

回答by josue alvarez

this is very easy, there is a method for this, button('refresh')

这很简单，有一个方法，button('refresh')

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

good luck!

祝你好运！

回答by brodybits

Updatedthe following works for me (similar to the answer from kova?):

为我更新了以下作品（类似于 kova 的答案？）：

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

or

或者

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