Question

I have a scenario where I have to bind click event to both outer and inner div, but there comes a problem where I click on the inner div it will fired 2 click event including outer and inner div binded event.

How do I get exact event fired for the inner div only?

Here I attached the jsfiddle demo:

http://jsfiddle.net/mochatony/FkCmH/8/

Answer 1

You can prevent events from bubbling to the parent using the .stopPropagation method, which does as its name suggests. Updated link: http://jsfiddle.net/EQpA2/

$('#big-box').click(function(){
    console.log('blue box');     
});

$('#small-box').click(function(e){
    e.stopPropagation();
    console.log('red box');     
});

​