Assign jQuery click event to the everything in the body except a few divs and their children

Question

When I press a div on my page, a popup appears. When you click the div again, the popup disappears. When you click outside of the div, the popup disappears - all looking good so far.

The problem is, when I click the popup, I want it so that the popup and it's children are clickable (they're links inside an unordered list), but I can't seem to get that to work. Here is my code:

        $(function () {
            $('#messageNotification').click(function (event) {
            $("body").one('click', function () {

                jQuery(".userInfo").fadeOut();
            });
            event.stopPropagation();
        });


          <body>
            <div id="messageNotification"><div class="notif same">0</div></div>
            <div id="messages">
                <ul class="userInfo" style="">
                    <li></li>
                </ul>
            </div>
             
          </body>

Which element is the popup? Where's the code to display the popup? — Anthony Grist, Aug 16 '12 at 14:43

score 7 · Answer 1 · answered Aug 16 '12 at 15:04

If I'm understanding you correctly, you can filter by selector. For example:

$('body').on('click', 'a', function(){ ... });

This would bind the click event to all elements matching the selector a.

If you want to bind the click to all elements not matching your popup, you could do something like:

$('body').on('click', ':not(#popup)', function(){ // code to dismiss popup here });

See the jquery documentation for :not() and .on() for more info...

Assign jQuery click event to the everything in the body except a few divs and their children

1 Answers1

Linked