jquery click anything but div and children

Question

I have a login window I am trying to fade out by clicking anywhere but in the div (and the login button which toggles the fade in and fade out)

 jQuery(document).ready(function ($) {
    $('.login').click(function () {
        $('#modal_login').fadeToggle('fast');
    });

    $('body').click(function (e) {
        if (!$(e.target).is('.login, #modal_login *')) {
            $('#modal_login').fadeOut('fast');
        }
    });
});

It all seems pretty straight forward, but my issue is with the #modal_login and it's children. If you click anywhere in the #modal_login div, it fades out. I've tried #modal_login > * as well with no luck.

The code works nicely, with the ".login" class button.

So my question is, am I even using the right syntax for what I'm trying to accomplish (to not have the div fade out when clicked on or click on any of it's children)? It seems legit?

Answer 1

One way around this is to prevent clicks within the modal from bubbling beyond the modal. Something like this:

$("#modal_login").click(function(e){
    e.stopPropagation();
});

Now clicks within the modal will not bubble to the outer handler which does the fadeOut.