javascript - Changing data-icon in jQuery Mobile? - Stack Overflow

admin管理员组

文章数量:1340931

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

Share Improve this question Follow asked Jul 23, 2012 at 3:41 Leo JiangLeo Jiang 26.3k5959 gold badges177177 silver badges328328 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 8

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.

本文标签： javascriptChanging dataicon in jQuery MobileStack Overflow