jquery toggleClass only works once

Question

This script makes it so when you click on a <div> another <div> appears by adding class log_in_box_dd to #big_ul_hide. Once #big_ul_hide has that class, clicking anywhere (except the #big_ul_hide will remove that class, thus hiding it. So you click to see a pop-up div, then click anywhere but that div should hide it.

This whole thing works, but only once. After that it gets really weird.
After it's added and then removed, inspecting elements will read <div id="big_ul_hide" class="">. I can't get the class to re-add.

I have added the setTimeout function so it won't doesn't remove the class immediately when .lin_und is clicked.

So, why is it not letting me re-add the class? If I alert(...) after the .toggleclass it will alert every time, but still not apply the class.

fiddle: http://jsfiddle.net/NQxAC/

<script>
$('.lin_und').click(function() {
    $('#big_ul_hide').toggleClass('log_in_box_dd');
});
setTimeout(function() {      
    $('html').click(function() {
        if($('#big_ul_hide').hasClass('log_in_box_dd')) {
            $('#big_ul_hide').removeClass('log_in_box_dd');
        }
    });
    $('#big_ul_hide').click(function(event) {
        event.stopPropagation();
    });
}, 2000);
</script>

Answer 1

You need to stop event bubbling initially and move the click event handler on html out from the inner click handler so it exists one it own (otherwise you're repeatedly binding the click event). Try using:

$('.lin_und').click(function (e) {
    e.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');
    $('#big_ul_hide').click(function (event) {
        event.stopPropagation();
    });
});
$('html').click(function () {
    $('#big_ul_hide').removeClass('log_in_box_dd');
});

jsFiddle example

Answer 2

if you dont stop bubbling on .lin_und with bubble up to html which will trigger its click event handler. you dont need the setTimeout. I would try something like this:

$('.lin_und').on('click', function (evt) {

    evt.stopPropagation();
    $('#big_ul_hide').toggleClass('log_in_box_dd');

});

$('html').on('click', function () {

    $('#big_ul_hide').removeClass('log_in_box_dd');

});

$('#big_ul_hide').on('click', function (evt) {

    evt.stopPropagation();

});

see it working here: Demo

Do you want the blue box to be the only one who shows up the hidden div? if so then change .toggleClass() to .removeClass() on the html click handler

Answer 3

I'm not quite sure whether I understood your requirements completely, but look at this: http://jsfiddle.net/NQxAC/1/

$('.lin_und').click(function() {                
    $('#big_ul_hide').toggleClass('log_in_box_dd');             
});
$('body').click(function(e) {
    if (!$(e).target().is('.lin_und'))
        $('#big_ul_hide').removeClass('log_in_box_dd');                 
});

Clicking on the upper div will toggle the lower one. Clicking anywhere else will hide the first one.