Click event in parent and children

jquery

Solution

yes you can just, change the order of binding the events and to stop propagation use stopImmediatePropagation

consider this fiddle

$('#childContainer2').click(function (e) {       
       alert('child container 2'); 
        e.stopImmediatePropagation()
     return false;
    }); 
$('#mainContainer').click(function () {
alert('main container');

    }).children().click(function (e) {
       alert('childen');
        return false;
    });

Problem

I have a parent element DIV that has children div elements. I have separate click implementations for parent and its children. ``` <div id="mainContainer"> <div id="childContainer"> </div> <div id="childContainer2"> </div> </div> $('#mainContainer').click(function () { console.log('main container'); }).children().click(function () { console.log('childen'); return false; }); $('#childContainer2').click(function () { console.log('child container 2'); }); ``` This is working fine. but if I click a child then the event runs twice which is how it is supposed to work. My question is - Is there a way that I can explicitly write event to parent that would not affect children so that children need not execute click function twice?

Original source