jquery - Clicking children triggers parent -

this question has answer here:

• how stop events bubbling in jquery? [duplicate] 5 answers

i have found many questions in regard, none of solutions me. keep experiencing feature (issue in case) when have multiple elements stacked on eachother. have dom situation this.

<div class="body" data-type="body" onclick="foo(this)">   <div class="container" data-type="container" onclick="foo(this)">   </div> </div> 

so when click .body console.log shows correct element. when click .container both elements fire onclick event. there way overcome this? or there possibility add listeners otherwise? pure jquery approach looks this. of course when use pure jquery have no inline onclick.

function initselectable(){   $('*[data-type]:not(.item-wrapper)').unbind('click').bind('click',function(){     console.log($(this));   }); } 

thank every suggestion and/or answer!

make sure events not propagating. use this:

event.preventdefault(); event.stoppropagation(); event.stopimmediatepropagation(); 

in code:

function initselectable(){   $('*[data-type]:not(.item-wrapper)').unbind('click').bind('click',function(event) {     console.log($(this));     event.preventdefault();     event.stoppropagation();     event.stopimmediatepropagation();   }); }