Question

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

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

Answer 1

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:

<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 before I got around to correcting my original answer.

---

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.

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

<!-- 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">).

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