Take the 2-minute tour ×

This is my code:

function togglePOIAndDisplay(toggle){
    var display = $(toggle).attr('data-icon');
    if(display == 'minus'){
        $(toggle).attr('data-icon', 'check');
    } else {
        $(toggle).attr('data-icon', 'minus');

It will log minus to the console and go into the first if() block and executes displayAllPOIOfType() correctly, but it will not reflect the change of the value although it gets set correctly. Any ideas why that is, because it obviously reads/sets the attribute correctly.

Is there an update function I need to call? thanks

share|improve this question
where is var toggle defined –  true Sep 27 '12 at 18:32
toggle is the selector to get the element. it works because it reads the attribute of "data-icon" correctly. so why wouldn't it work the second time? –  DatProgram Sep 27 '12 at 18:34
Are you really sure the attribute isn't set ? Could you log it just after $(toggle).attr('data-icon', 'check'); ? –  dystroy Sep 27 '12 at 18:36
it may be because your creating a new element on the fly. you might have to use delegate or on –  true Sep 27 '12 at 18:36
Hey, you're logging console.log(display), that's useless ! log $(toggle).attr('data-icon'). –  dystroy Sep 27 '12 at 18:41
show 4 more comments

3 Answers

up vote 9 down vote accepted

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);
                     .addClass('ui-icon-' + newIcon)
                     .removeClass('ui-icon-' + oldIcon);
share|improve this answer
thanks man that actually did it !! <3 –  DatProgram Sep 27 '12 at 19:26
Thanks - useful. I wanted to toggle the data-split-icon in a collapsible and did this: $(this).find(".ui-icon").addClass("ui-icon-newicon").removeClass("ui-icon-oldico‌​n"), where $(this) is the object containing the split button. –  Samik R Feb 7 '13 at 6:31
add comment

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>');

share|improve this answer
add comment


change custom icon to star icon.


this example is easy to study.

share|improve this answer
This is one year old and the solution has been posted, accepted and your answer is the exact copy of that. –  DatProgram Nov 1 '13 at 9:46
@DatProgram yes, your question may be solved,but other people may have the same problem in the future, and yes, FMM give a good answer, but i just give a supplementary of it. and this may give convenience to others. –  christophe Nov 2 '13 at 15:29
could have posted that link as a comment to his solution though, no need to write the same answer as a "new" answer. –  DatProgram Nov 2 '13 at 16:43
@DatProgram through the original answer I spend 6-10 minutes, but the answer I added , others may need only 2-3 minutes to solve it. –  christophe Nov 3 '13 at 13:41
add comment

Your Answer


