CODEWITHSUNDEEP
javascriptjquery
TonyTakeshi
TonyTakeshi

Reputation: 5929

How to have jQuery fired exact binded event only

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/

Upvotes: 0

Views: 61

Answers (2)

Bill
Bill

Reputation: 645

Just add return false; to the small box handler.

Fixed jsFiddle: http://jsfiddle.net/brodenbaugh/BMPYd/

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

Upvotes: 2

nbrooks
nbrooks

Reputation: 18233

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');     
});

​

Upvotes: 1

Related Questions