Change data icon in jQuery Mobile?

Question

I have found many solutions on the Internet, but none of them work for me. Basically, I want to switch the button icon. Here's the HTML:

<div data-role="navbar" data-iconpos="top"> <ul> <li><a data-icon="arrow-u">View suggestions</a></li> </ul> </div> 

I tried all this:

 $(this).buttonMarkup({ icon: 'arrow-u' }); 

//

 $(this).attr('data-icon','arrow-u'); $(this).children().children().next().removeClass('ui-icon-arrow-d').addClass('ui-icon-arrow-u'); 

//

 $(this).jqmData('icon','arrow-u'); 

However, for some reason, the children of the button disappear after any of the above actions is performed (jQuery Mobile adds a bunch of <span> inside the button).

Answer 1

I found a problem! I used $(this).text('Hide suggestions') , which removed all the children. I changed it to $(this).find('.ui-btn-text').text('Hide suggestions'); and now it works great!

Answer 2

The best way to do this is:

 $('#button').buttonMarkup({ icon: "home" }); 

Answer 3

Try the following:

 $(this).attr('data-icon','arrow-u').button().trigger("refresh"); 

See the related forum: http://forum.jquery.com/topic/how-dynamically-update-data-attributes

Answer 4

They worked for me:

 $("#yourButtonId .ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-delete"); $(this).children("span").children(".ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-delete"); $(this).find(".ui-icon").removeClass("ui-icon-gear").addClass("ui-icon-save"); 

I don’t know, the witch is the best, the last thing I think.