I found a bunch of solutions online, but none of them are working for me. Basically, I want to toggle the icon of a button. 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 of these:

$(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 child elements of the button all disappear after any of the above is ran (jQuery Mobile adds a bunch of <span>s inside the button).

I found a bunch of solutions online, but none of them are working for me. Basically, I want to toggle the icon of a button. 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 of these:

$(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 child elements of the button all disappear after any of the above is ran (jQuery Mobile adds a bunch of <span>s inside the button).

• javascript
• jquery
• jquery-mobile

4 Answers 4

The best way to do that is:

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

Try this:

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

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

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

These 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 witch is the best, the last I think.