title: Assign jQuery click event to the everything in the body except a few divs and their children
body: <p>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.</p>
  
  <p>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</p>
  
  <pre><code>        $(function () {
              $('#messageNotification').click(function (event) {
              $("body").one('click', function () {
  
                  jQuery(".userInfo").fadeOut();
              });
              event.stopPropagation();
          });
  
  
            &lt;body&gt;
              &lt;div id="messageNotification"&gt;&lt;div class="notif same"&gt;0&lt;/div&gt;&lt;/div&gt;
              &lt;div id="messages"&gt;
                  &lt;ul class="userInfo" style=""&gt;
                      &lt;li&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
            &lt;/body&gt;
  </code></pre>