使用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 ,并且您看到的文本实际上不是按钮的值,而是生成的span中的文本.你可以遍历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>和<input type="button">)的文本.

<a>如果你可以提供帮助,我不建议使用这个按钮,因为没有id和我的方法,至少,依赖于在元素之前出现的<a>相应事实.<input type="button" /><input>

Answer 3

[弃用]

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

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

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