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

Question

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

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

以上针对相关问题推荐的代码似乎不起作用。

也不是：

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

我的按钮代码如下：

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

我会感谢任何反馈人员。感谢

Answer 1

由于jQuery mobile围绕 input type =“button”元素生成HTML，而您所看到的文本实际上并不是按钮的值，而是生成的<强>跨度即可。你可以遍历DOM寻找实际的跨度，或者通过调用.button（“refresh”）告诉jQuery重新生成按钮HTML，如下所示：

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

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

Answer 2

更新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>

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

$('#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")

这是 a working example showing how to change text for both types of buttons （<a>和<input type="button">）。

如果你可以提供帮助，我建议不要使用<a>按钮，因为没有id而且我的方法至少依赖{{1}的事实与<a>对应的对象出现在<input type="button" />元素之前。

Answer 3

（已废弃）

使用按钮输入的缺点是无法以传播到jquerymobile按钮的方式更改输入的属性。然后只有新的方式：

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

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

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

Answer 5

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

Snippet 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>

Snippet 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>

这会生成以下错误消息：

在初始化之前无法调用按钮上的方法;试图调用方法'刷新'

这让我感到困惑，因为只有在初始化页面后才会调用此函数。进一步阅读，然后我注意到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选择器就像魅力一样。

Answer 6

这很容易，有一种方法，button（'refresh'）

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

祝你好运！

Answer 7

更新了以下作品（类似于kovač的回答）：

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

或

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