Question

I am attempting to programmatically change the text of a button in jQuery Mobile. When I do this the button loses some formatting. Below is code illustrating two attempts. Can any one suggest a way to do this that isn’t going to jam up the browser?

<script>
$(document).bind("pageinit", function(){

    $("#buttonId").text("New Text");
    $("#buttonId").button("refresh");
});

//Method #2
$(document).ready(function () {
    $("#buttonId").text("New Text");
    $("#buttonId").button("refresh");
});
</script>

<a  id="buttonId" href="" data-role="button">Old Text</a>

Answer 1

This should be used:

$("#buttonId span span").text("New Text");

to change a text, there’s no need for:

$("#buttonId").button("refresh");

Also in the future don’t use: $("#buttonId").button("refresh");, this function is used only to enhance dynamically created/expanded listview look.

Correct way is :

$("#buttonId").button();

Button don’t have a refresh method. If you want to find more about this and why is it important to be careful when working with a dynamically created content in jQuery Mobile take a look at my blog ARTICLE. Or you can find it HERE.