Question

So basically I have a few links, when you click one, it should add the highlighted class. I also have a button that when clicked should hide the link with the highlighted class.

This seems trivial and should be very simple, but I can’t understand why my code does not work. Another thing, is for some reason, the links still go through once clicked in the fiddle. Not sure if it’s something with jsfiddle and how it handles external links?

Here is my fiddle: http://jsfiddle.net/ZPGe7/1/

Answer 1

You should not cache the jQuery object, because it doesn’t update when the elements receive different class names. Also, use event.preventDefault() to prevent the link from being followed. Directly use $('.links a.highlight') in your code.

Fiddle: http://jsfiddle.net/ZPGe7/2/

$(function() {
    $('.links a').live('click',function(ev){
            $('.links a.highlight').removeClass('highlight');
            $(this).addClass('highlight');
            ev.preventDefault(); //Prevent link from being followed
    });
    $('#submit').live('click',function(){
        $('.links a.highlight').hide();
    });
});