How to attach a onclick callback to a div but not on a link inside the div?

Question

Html

<div class='item_container'>

[...bunch of links and pictures...]
<a class='item_owner'>John Doe</a>

</div>

Javascript

/**
    Bind the onclick only if you hover on the item since we got a lot
    of items and several events and plugins to setup on them.
*/
$('.item_container').live('mouseenter', function(e){
  $this = $(this);
  if (!$this.data('isSetup')) {
    $this.click(function(e){
      // do magic
      return false;
    });
     [... a lot of other stuff]
    $this.data({'isSetup': true});
  }
});

Of course when I click anywhere in the div, it performs 'do magic'. Thanks to return false, if I click on any link in the div, it still performs 'do magic' and doesn't change the page, which is the expected behavior.

But there is one link that is suppose to actually change the page, the owner link. Trouble is, with my current set up, I prevent it from working.

Answer 1

You need to stop the propagation of the event from the links to the parent .item_container.

Add this block to the code:

$('.item_container a.item_owner').live('click', function(e){
 e.stopPropagation();
});