Javascript + jQuery, click handler returning false to stop browser from following link

Question

I'm trying to stop the browser from following certain links, rather I want to unhide some Divs when they are clicked.

I'm having trouble just getting the links to not be followed though.

Here's what I have:

var titles = $('a.highlight'); jquery.each(titles, function(){ this.click(function(){ return false; } ) } );

It seems like the click handler is not being assigned. What am I missing?

Answer 1

Try

this.click(function(e){ e.preventDefault(); }

Actually, it looks like you might need to use the jQuery constructor on this:

$(this).click(function(){ return false; }

You could also try using parameters on the each function instead of using this:

jQuery.each( titles, function(index, elem) { $(elem).click( function() { return false; } ) } );

Personally, I would just do titles.each( ... though. In that instance you can use this to bind the click handler. I am not sure off the top of my head what this binds to with jQuery.each

Or just calling click on titles:

titles.click( function() { return false; } )

That will bind click to every element in titles. You don't need to loop through them.

Answer 2

You can compress that jquery a bit:

$('a.highlight').click(function() { return false; });

You should also make sure that:

• There are no other click handlers registered for those elements later on.
• The code you have is attaching after the elements have loaded. If they're not completely loaded, they won't be found in the $('a.highlight') selector. The easiest way to do this is to put your code in a $(document).ready(function() { *** code here *** }); block.

Edit: As per other responses - the problem was that this represents a DOM object, while $(this) is a jquery object. To use the .click function to attach a handler, you need a jquery object.

In short, using this inside the each loop won't work with what you're trying to do. You'll need to get a jquery representation by using $(this) instead.