jquery mobile remove class not working on click event

Question

I have a button in jQuery mobile:

 <a href="#" data-role="button" id="show_edit" data-theme="d" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-corner-left ui-btn-up-a ui-btn-up-d"><span class="ui-btn-inner ui-corner-left"><span class="ui-btn-text">Edit</span></span></a>

If I do this in the console, it works (the button colour changes):

$('#show_edit').removeClass('ui-btn-up-d').addClass('ui-btn-up-a');

However, if I do wrapped in a click handler on my page, the class 'ui-btn-up-d' is not getting removed?

$('#show_edit').on('click', function() {
                    $(this).removeClass('ui-btn-up-d').addClass('ui-btn-up-a'); 
                });

Edit: I think the answer below is the right one, however here is another way, which is changing the data-theme too:

$('#show_edit').attr('data-theme', 'a').attr('class', 'ui-btn ui-corner-left ui-btn-up-a');

Did you check if the click event was triggered? By outputting in the console for exemple? Because it might be triggered on the span. and also, return false to prevent the default behavior of the link anchor. — Maresh
– Maresh, Commented Mar 14, 2013 at 15:13
Good idea. I did just check and it's registering the click event. — redconservatory
– redconservatory, Commented Mar 14, 2013 at 15:14

user400654 · Accepted Answer · 2013-03-14 15:23:45Z

2

Most likely you aren't binding the event at the right time, or it is targeting the wrong element (such as duplicate id's which is very easy to get unintentionally in jQM)

For example, if your current page had an id="home", you would bind it like this:

// every time the id="home" page is initialized, run this handler
$(document).on('pageinit','#home',function(){

    // ensure it targets only elements within this page, however it would
    // be better if you didn't use ID's in jQuery Mobile due to the way it 
    // handles pages.
    $('#show_edit',this).click(function() {
        //$(this).removeClass('ui-btn-up-d').addClass('ui-btn-up-a');
        $(this).toggleClass('ui-btn-up-d ui-btn-up-a');
    });

});

edited Mar 14, 2013 at 15:23

answered Mar 14, 2013 at 15:11

user400654

95.1k16 gold badges168 silver badges188 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jquery mobile remove class not working on click event

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related