jquery fade in/out not work second time round, it fades back out immediately

Question

I have some text which says 'login/signup'. when you click the text a box fades in below it with some log in options. then when you click outside that box it fades out again.

$(document).ready(function() {

$("#menu").on("click","#login",function() {
//the following is to keep this part clickable.
    $(this).find('div, span, input, a').addClass('noclick');

    $('#signups').fadeIn(200, function() {
        $('html').on('click', function(event) {
            var target = $( event.target );
                if (target.is('.noclick')) {                        
                }
                else{
                    $('#signups').fadeOut(200);
                }
            });
        });
    });
});

no idea why it isnt working any help would be appreciated.

Also which jquery version should i put a link to at top of page? or does it not matter?

thanx

edit still got problems.... please read comments from first answer if you wish to help. thankyou

Answer 1

You need to handle bubbled click event once on the document. It means that you need in jQuery method one with selector argument. Replace your $('html').on(... with this:

$(document).one('click', ':not(.noclick)', function() {
    $('#signups').fadeOut(200);
});

I recommend you latest first or second jQuery version.