Change data-icon on click with jquery mobile

Question

This is my code:

function togglePOIAndDisplay(toggle){
    var display = $(toggle).attr(\'data-icon\');
    console.log(display);
    if(display == \'minus\'         


        

Answer 1

For listviews, you need to insert a span.

$("#times").off('click','li').on("click","li",function() {

 /* add a checkbox when you click the listview li  */
 $(this).find('div.ui-li').append('<span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span>');

});

Answer 2

http://jsfiddle.net/phillpafford/8pwFK/29/

change custom icon to star icon.

$(this).attr('data-icon','star');
$(this).find('.ui-icon').removeClass('ui-icon-custom').addClass('ui-icon-star');

this example is easy to study.

Answer 3

This depends on whether it's a button, or a select, or some other thing that accepts the data-icon attribute. Unfortunately, jQuery Mobile doesn't have great support for dynamically changing things controlled by data-* attributes, so you'll have to adjust the attribute as well as modify the classes on the child elements.

For buttons, something like this ought to work:

$(buttonSelector).attr('data-icon', newIcon);
                 .find('.ui-icon')
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);

Answer 4

If the icon is inside a button like this:

<a id="buttonID" href="#" data-role="button" data-icon="delete">Button</a>

You can change the icon with the buttonMarkup function:

$('#buttonID').buttonMarkup({ icon: "check" });

Or to your custom icon:

$('#buttonID').buttonMarkup({ icon: "my-icon" });

Example: http://jsfiddle.net/u8fnJ/1/

As shown in this post How to refresh a button in a header with jQueryMobile?