Changing the value of a jQuery mobile button using jQuery

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 te         


        

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:

    
        Show Submit Button
    

    

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 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 , jQuery Mobile seems to hide the element and creates a new 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 as the selector, it doesn't work since that doesn't have the text that you see on screen. The generated markup looks something like this

    
        My Value
    



    
        
    

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 ( and ).

I wouldn't recommend using this over buttons if you can help it though since there isn't an id and my approach, at least, relies on the fact that the corresponding to the appears just before the element.