jquery - Prevent click event to fire when clicked within element, including any and all of its children elements -

I have a script that opens a certain element and closes an overlay where there is a black background (such as When clicking on the video) and when the user clicks anywhere on the black, the overlay will be closed. However, if the user clicks on the inner container, or any element should be open.

If I click any child, the internal container stops in my script. How to stop it?

  docu = $ (document), quot = $ ('. Quot;), quot_over = $ ('. Quote_overlay '), quot_cont = $ ('. Quote_container '); Quot.click (function) {quot_over.toggle (1, function) {docu.click (function) {var target = $ (event.target); if (! Target.is (quot_cont)) {quot_over Hide (); docu.unbind ('click');}});});});  

I'm not sure why you are in this line:

< P> quot_over.toggle (1, function)

But before clicking, clicking on it immediately closes, so you have to remove it.

Second, you are only checking if the click is on quote_container , and is not checked whether it is on any children of quote_container .

Working JSFined: