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.

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.

• javascript
• jquery
• onclick
• toggleclass

• 1 Are you sure you don't bind the function twice somehow? – NOtherDev Commented Nov 2, 2010 at 11:22
• @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 Commented Nov 2, 2010 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 Commented Nov 2, 2010 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 Commented Nov 2, 2010 at 11:41

4 Answers 4

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

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!

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!

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.