jQuery click eventhandler issues.

Question

I've build a site that has accordion sections that expand whenever someone clicks on the header section for that page, the click handler is placed on

$('.section h2').click

However, when a user is logged in as admin, there are 'EDIT' links applied to the header, so I only want the section to expand if the area clicked is not "a.edit-link".

I've tried things like $('.section h2:not(a.edit-link)').click... or $('.section h2').not('a.edit-link').click, but niether of these options are working for me..

Am I missing out on something obvious?

Answer 1

You can do it using event.stopPropagation(), like this:

$('.section h2').click(function() {
  //do stuff
});
$('.section h2 a.edit-link').click(function(e) { 
  e.stopPropagation();
});

When a click on an a.edit-link happens, that click just won't bubble up to the <h2> parent, and its click handler won't fire.

Alternatively you could check the event target inside your handler, like this:

$('.section h2').click(function(e) {
  if($(e.target).hasClass('edit-link')) return; //bomb out
  //do stuff
});

Answer 2

I haven't tried this personally, but here is a thought:

• give the admin links their own css class

• after adding the click handler for the header add a more specific click handler for the edit links that does not expand the the section

• make sure event bubbling is suppressed on the link handlers