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>

why is click handler inside `setTimeout`.Please take them out of crap — Deepak Ingole, Apr 02 '14 at 14:54
And why are you nesting handlers here? (in your jsFiddle at least...) — A. Wolff, Apr 02 '14 at 14:54
Is this what you're after http://jsfiddle.net/j08691/NQxAC/2/? — j08691, Apr 02 '14 at 14:55
@j08691 yes, please post an answer with description and I'll try it to out, then accept. — Ghost Echo, Apr 02 '14 at 14:57
@Pilot, because that setTimeout should only happen if .lin_und is clicked — Ghost Echo, Apr 02 '14 at 15:01
@j08691, that works perfectly, please post so I can accepts, thanks so much...worked on this for about 2 hours now... — Ghost Echo, Apr 02 '14 at 15:04

score 3 · Accepted Answer · answered Apr 02 '14 at 15:10

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

score 2 · Answer 2 · edited Apr 02 '14 at 15:32

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

The reason I don't have the event handler nested is because you will be setting event listener every time you click — jsGuy, Apr 02 '14 at 15:24

score 1 · Answer 3 · answered Apr 02 '14 at 14:55

1

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.

answered Apr 02 '14 at 14:55

Julian

61
4

not quite, clicking div hides/show. If div has class clicking anywhere but div will remove class (hide div). – Ghost Echo Apr 02 '14 at 14:59
um, yeah. but that's what happening right now. Or I don't understand what you mean :/ – Julian Apr 02 '14 at 15:14
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 – Ghost Echo Apr 02 '14 at 16:52

jquery toggleClass only works once

3 Answers3