Question

Perhaps I am doing this incorrectly/inefficiently but this isn’t working for me:

$(document).ready(function(){

    $('li.taglink').click(function(){
        alert('clicked tag');
        $userClicked = $(this).html();
        $('#holder').children('div').each(function () { 
            $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                                       
            $x = $(this).attr("tags");
            ele = $x.split(',');
            for (var i = 0; i < ele.length; i++) 
            {
            if ($userClicked == ele[i]) {$(this).show(495); break;} 
                                    else {$(this).hide(495);}   
            }
        });
        $(this).removeClass('taglink').addClass('taglinkcurrent');
    });

    $('li.taglinkcurrent').click(function(){
        alert('clicked current');
        $('li.taglinkcurrent').removeClass('taglinkcurrent').addClass('taglink');                               
        $('li.taglink').show(495);
    });

});

The page contains divs with “tags” attributes that contains several tags. I also have an unordered list, with each li element containing the individual tags. When a user clicks one of the li elements, it shows all the divs that have that tag, and hides everything else. If a user clicks that same li element, it then shows everything once again. I added in the alerts to test what was going on, and every time I click a link it pops up “clicked link” even when the li had its class switched to .taglinkcurrent. Any ideas of what I’ve done wrong?

Answer 1

I suppose the event is attributed to each li on load, and the subsequent class changes doesn’t unbind the event.
But you can easily fix this this way, I think :

$('li').click(function() {
    if ( $(this).hasClass("taglink") ) {
        alert("clicked tag");
        ...
    } else if ( $(this).hasClass("taglinkcurrent") ) {
        alert('clicked current');
        ...
    }
});