How to change a JQuery Mobile button icon with javascript

Question

I would like to have a button that changes data-icon class depending upon user selections

Example button would be:

Answer 1

jQuery Mobile has a predefined function:

$('a').buttonMarkup({ icon: "star" });

It is not enough to change an attribute, final button restyling must be done with .buttonMarkup( function.

Here's an official documentation: http://jquerymobile.com/demos/1.2.0/docs/buttons/buttons-options.html

And here's an example: http://jsfiddle.net/Gajotres/AmFKa/

Also, because you are creating a custom button it wont be enough just to change icon name, first you need to define it in your css like this:

We would add this new icon like this:

$('a').buttonMarkup({ icon: "edit" });

In this case we are adding picture edit. Now notice its cass name .ui-icon-edit, to add a new icon class you need to combine a .ui-icon- string with a icon name. In your case your class name would be .ui-icon-another-flag.