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>

Filch

why is click handler inside setTimeout.Please take them out of crap – Rashidarashidi

And why are you nesting handlers here? (in your jsFiddle at least...) – Derr

Is this what you're after jsfiddle.net/j08691/NQxAC/2? – Vandervelde

@Vandervelde yes, please post an answer with description and I'll try it to out, then accept. – Filch

Why is the marked down? I met the requirements. – Filch

@Pilot, because that setTimeout should only happen if .lin_und is clicked – Filch

@j08691, that works perfectly, please post so I can accepts, thanks so much...worked on this for about 2 hours now... – Filch

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

Vandervelde

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

Net

The reason I don't have the event handler nested is because you will be setting event listener every time you click – Net

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.

Downpipe

not quite, clicking div hides/show. If div has class clicking anywhere but div will remove class (hide div). – Filch

um, yeah. but that's what happening right now. Or I don't understand what you mean :/ – Downpipe

In your example you have to click the trigger div to hide the new div. I want it to do that, but also by clicking anywhere else would also hide it. See accepted answer for what I'm trying to accomplish. Thanks, though! :-D – Filch