Question

There are two nested elements, both have different click actions.
I need to stop outer element action when inner element is clicked.

HTML:

<div id='out'>
    <div id='in'></div>
</div>

jQuery:

$('#out').click(function(){alert('OUT div is pressed')})
$('#in').click(function(){alert('IN div is pressed')})

I need when in is pressed, only his action is executed. out‘s script should have no action.

How it can be solved?

Answer 1

You should use stopPropagation():

$('#in').click(function(e){
   alert('IN div is pressed')
   e.stopPropagation();
});