Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to detect specific element in jQuery event propagation
    primarykey
    data
    text
    <p>I've a notifications window (absolutely positioned div) and I want it to close when clicking everything outside that window.</p> <p>I tried:</p> <pre><code>&lt;div id="#notifWindow"&gt; &lt;div id="notifs"&gt;Notifications...&lt;/div&gt; &lt;a class="ajax" data-bla="blabla"&gt;Click for ajax&lt;/a&gt; &lt;/div&gt; $(document).on(function(event){ // If clicking over child elements stopPropagation() else window is closed. if ($(this).closest('#notifWindow').length) event.stopPropagation(); else $('#notifWindow').hide(); }) // Just for your information $(document).on('click', 'a.ajax', function(event){ // If I use onclick=event.stopPropagation() in #notifWindow this ajax fails }) </code></pre> <p>Here, $(this) is not the element which throws the event, but the document.</p> <p>Thank you for your time.</p> <p><strong>SOLUTION</strong></p> <p><a href="http://jsfiddle.net/8CyQU/" rel="nofollow">http://jsfiddle.net/8CyQU/</a></p> <pre><code>// Every .ajax inside #notifWindow (dinamically ajax generated) is executed. $('#notifWindow').on('click', '.ajax', function(event) { alert('This ajax is executed!'); }); // If clicking everywhere inside #notifWindow the propagation of 'click' is stopped $('#notifWindow').on('click', function(event) { event.stopPropagation(); $(document).on('click', '#open', function(event){ $('#notifWindow').slideDown(); event.stopInmediatePropagation(); // It avoid other click events for (document). }); // Hides the window clicking everywhere $(document).on('click', function(event) { $('#notifWindow').hide(); }); </code></pre> <p>Thank you all :-)</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload