Question

Suppose I have:

   <div id="outer" onclick="thingsHappen()">
      <div id="inner"></div>
   </div>

When I click on outer or inner div, thingsHappen() is executed. That is obvious.

Now I have got a need to define a different method for the inner div.
For example

$("#inner").click(function() {
    doThings();
});

When I click on inner both thingsHappen() and doThings() executes.
How do I execute doThings() when I click on inner div without executing thingsHappen()?

I tried to unbind click method from #inner, but it did not work.
PS. I cannot change the structure of HTML.

Answer 1

Stop the propagation of the event:

$("#inner").click(function(e) {
    doThings();
    e.stopPropagation();
});

Example: http://jsfiddle.net/QNt76/

JavaScript events bubble up the DOM tree unless you stop them from propagating. This is what was causing the parent event handler to get notified.