Changing data-icon in jQuery Mobile?

Question

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).

Answer 1

The best way to do that is:

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

Answer 2

Try this:

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

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