jQuery toggleClass not working?

Question

Very simply put : the line currentItem.toggleClass('open'); doesn't seem to work.

More precisely, when inspecting the results with firebug, I can see the class "open" flashing (appearing and immediately disappearing) on the relevant element. So it's like the function is actually triggered twice (of course I only click once).

Can somebody explain me why this is and how to prevent it?

Here is my jQuery code :

$('div.collapse ul.radio_list li input[type=radio]').click(function (event) {

    var currentTree = $(this).parent().parent().parent();
    var currentItem = $(this).parent().parent();
    var currentGroup = currentItem.attr('rel');

    $(this).parents('ul').children('li').removeClass('select');
    if ($(this).is(':checked')) {
        currentItem.addClass('select');
    }

    currentItem.toggleClass('open');

    var currentLevel = 0;
    if (currentItem.is('.level1')) {currentLevel = 1;}
    if (currentItem.is('.level2')) {currentLevel = 2;}
    if (currentItem.is('.level3')) {currentLevel = 3;}
    var nextLevel = currentLevel + 1;

    currentTree.children('li').filter('li[rel ^=' + currentGroup + '].level' + nextLevel).animate({'height': 'show', 'opacity': 'show'}, 250).addClass('currentChild');
});

And here is a part of my HTML code, slightly simplified for better readability (not very pretty I know, but I only have a limited control on the HTML output) :

<div class="col_left collapse">
    <ul class="radio_list" rel="7">
        <li class="onglet level0" rel="group1">
            <span class="onglet level0">
                <input type="radio" />
                    <label>Services Pratiques</label></span>
            <input type="hidden" value="1">
        </li>

Thanks in advance.

@A.: I don't think so: this is the only time I use ".click()" in my page, and also the only time I modify this class name. I also tried to use other class names with no better results. — s427, Nov 02 '10 at 11:26
@A.: Actually you were right! I'm working with a framework (Prado) that I don't know very well, and I wasn't aware that the JS file had been included twice in the HTML head. Correcting this has solved the problem. Thanks! — s427, Nov 02 '10 at 11:39
you should post this as the answer, it might help the next person who comes along with the same issue. — Nick Craver, Nov 02 '10 at 11:41

score 12 · Accepted Answer · answered Nov 02 '10 at 11:41

12

Problem solved: the JS file was actually included twice in the HTML head, which caused the function to be triggered twice with each click.

answered Nov 02 '10 at 11:41

s427

1,454
5
17
33

After banging my head against the keyboard for like an hour, your comment did it for me...I'd included it twice. Ughhhhh – Mike Davlantes Mar 31 '17 at 05:17

score 1 · Answer 2 · answered Apr 17 '13 at 15:01

1

I had a similar problem doing this:

html:

<a>JS-link</a>

js:

$('a').click(function(event) {
    ... my stuff ...
    # Forgot to do event.preventDefault(); !!
}

results in clicks being register twice!

answered Apr 17 '13 at 15:01

OZZIE

6,609
7
55
59

score 1 · Answer 3 · answered Dec 17 '15 at 03:17

1

I had the same issue and realized I had accidentally bound the function twice. I had originally meant to move the code from one javascript file to another but accidentally left the original in its place.

answered Dec 17 '15 at 03:17

kojow7

10,308
17
80
135

score 1 · Answer 4 · answered Aug 30 '11 at 21:33

1

I had a similar problem on my site, and I found that I had accidently duplicated the toggleclass hook all the way at the bottom, when first messing around with it. Oops! Make sure to look for double calls!

answered Aug 30 '11 at 21:33

Sasha

11
1

jQuery toggleClass not working?

4 Answers4