CODEWITHSUNDEEP
jqueryjquery-events
jezorama
jezorama

Reputation: 357

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

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>

Upvotes: 4

Views: 3723

Answers (1)

Neal Pisenti
Neal Pisenti

Reputation: 536

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...

Upvotes: 7

Related Questions