How to connect onclick callback to div, but not by link inside 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 does "do magic". Thanks return false, if I click on any link in a div, it still does "do magic" and does not change the page, which is the expected behavior.

But there is one link that should actually change the page, the link of the owner. The problem is that with my current setup, I prevented her from working.

Answer 1

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

Add this block to the code:

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