Problems with jquery Click events in adding and removing classes

Question

I am trying to add and remove class using jquery click function. It works for the first click but I don't know why it is not working for the second click. It not showing any errors as well.

Here is the html

<p class="right hand hidesubcategory">Hide</p>

And the script:

$('.hidesubcategory').click(function() {   
        $(this).text('Show');
        $(this).removeClass('hidesubcategory').addClass('showsubcategory'); 
});

$('.showsubcategory').click(function() {
        $(this).text('Hide');
        $(this).removeClass('showsubcategory').addClass('hidesubcategory');
});

Thanks in advance

Nikhil Aggarwal · Accepted Answer · 2015-06-27 08:17:34Z

2

At the time of binding, there was no element with class .showsubcategory, hence that binding never takes place.

With dynamic elements/bindings you need to update the code like following.

$(document).on('click', '.hidesubcategory', function() {   
        $(this).text('Show');
        $(this).removeClass('hidesubcategory').addClass('showsubcategory'); 
});

$(document).on('click', '.showsubcategory', function() { 
        $(this).text('Hide');
        $(this).removeClass('showsubcategory').addClass('hidesubcategory');
});

For reference - http://plnkr.co/edit/zCkzsnUmDXqV7cmvtP9g?p=preview

answered Jun 27, 2015 at 8:17

Nikhil Aggarwal

28.5k4 gold badges46 silver badges61 bronze badges

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

Comments

Jakir Hossain · Accepted Answer · 2015-06-27 09:16:14Z

2

$(function(){
 $(document).on('click', 'p.right.hand', function() {   
        var thisItem = $(this);

        if(thisItem.text() == 'Hide'){
          thisItem.text('Show');
        } else {
          thisItem.text('Hide');
        }

        if(thisItem.hasClass( "hidesubcategory" )){
          thisItem.removeClass('hidesubcategory').addClass('showsubcategory');
        } else {
          thisItem.removeClass('showsubcategory').addClass('hidesubcategory');
        }


});
});

answered Jun 27, 2015 at 9:16

Jakir Hossain

2,51720 silver badges24 bronze badges

Comments

Vishal Kiri · Accepted Answer · 2015-06-27 08:49:56Z

1

Try this code.

$(document).ready(function() {
    $('.hidesubcategory').live("click",function () {
        $(this).text('Show');
        $(this).removeClass('hidesubcategory').addClass('showsubcategory');
    });

    $('.showsubcategory').live("click", function () {
        $(this).text('Hide');
        $(this).removeClass('showsubcategory').addClass('hidesubcategory');
    });
});

answered Jun 27, 2015 at 8:49

Vishal Kiri

1,3061 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Problems with jquery Click events in adding and removing classes

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related