0

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>
Cœur
  • 37,241
  • 25
  • 195
  • 267
Ben Pearce
  • 6,884
  • 18
  • 70
  • 127

1 Answers1

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.

Community
  • 1
  • 1
Gajotres
  • 57,309
  • 16
  • 102
  • 130
  • Worked great, thanks! Is span span reffering to the html tag? Is that because jQuery Mobile adds those tags when the page compiles? – Ben Pearce Jan 29 '13 at 09:15
  • When jQM creates a button it will enhance its markup with additional span tags. You can check it using firebug addon on Firefox or Chrome. – Gajotres Jan 29 '13 at 09:18