添加和删​​除类中jquery Click事件的问题

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

Answer 1

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

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


});
});

Answer 3

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