Question

I have an outside div, inside this is a lot of P elements and it binds an event handler:

$("#container").on("click","div",showNext)

and this click event binds successfully, but somehow all the elements inside are all bound to this event handler, how to remove?

See all the code here: Jsfiddle

All I want is to click the div and hide the current one and show the next one, but the problem is when I click on a p element it hides, neither…

So what did I miss? I am really new to Js…..

Answer 1

Try this:

$(".con").on("click",showNext)
 .children().on('click',function(e){e.stopPropagation();})

It prevents the click-event inside the children of .con from bubbling.

http://jsfiddle.net/doktormolle/KL4uw/