javascript function is calling twice

Question

I feel confused and frustated right now, coming here looking for some enlightment.

I am working with this js function:

jQuery('#elements_hidden .vign').on('click', function(e)
{
    var valid        = '/img/site/valid.png';
    var unvalid      = '/img/site/unvalid.png';
    var anchor       = jQuery(this).next('.valid');
    var anchor_block = jQuery(this);
    var list         = jQuery(this).parents('li').parents('ul').children('li');
    var state        = anchor.attr('src');

    console.log('state:' + state);

    jQuery(list).each(function(index, val)
    {
        jQuery(val).children('.valid').attr('src',unvalid);
        jQuery(val).children('.vign').attr('src',jQuery(val).children('.vign').attr('src').replace('on.png','off.png'));
    });

    if (anchor.attr('src') == unvalid)
    {
        anchor.attr('src',valid);
        anchor.siblings('.vign').attr('src', anchor.siblings('.vign').attr('src').replace('off.png','on.png'));

        if(state != unvalid)
        {
            anchor.attr('src',unvalid);
            anchor.siblings('.vign').attr('src',anchor.siblings('.vign').attr('src').replace('on.png','off.png'));
        }

    }
});

over this piece of markup:

<!-- html markup -->
<div id="elements_hidden" style="z-index: 0">

<div class="moteur">
    <ul id="moteur">
            <li>
                <img data-optionCode="12" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
            <li>
                <img data-optionCode="2T" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
            <li>
                <img data-optionCode="4T" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
    </ul>
</div>

<div class="couleur">
        <ul id="couleur">
            <li>
                <img data-optionCode="0MP50NP5" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
            <li>
                <img data-optionCode="0MP60NP6" class="vign" src="/img/site/vign/vign_off.png" />
                <img class="valid" src="/img/site/unvalid.png" />
            </li>
        </ul>
</div>

<div class="selle">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="jonc">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="retros">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="signature">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="rangement">
    <ul id="rangement">
            <ul>
                <li>
                    <img data-optionCode="DAKP7" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
                <li>
                    <img data-optionCode="DAKR1" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
            </ul>
            <ul>
                <li>
                    <img data-optionCode="DLU01" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
            </ul>
            <ul>
                <li>
                    <img data-optionCode="DPQ01" class="vign" src="/img/site/vign/vign_off.png" />
                    <img class="valid" src="/img/site/unvalid.png" />
                </li>
            </ul>

    </ul>
</div>

<div class="confort">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

<div class="perso">
    <ul>
        <li><img class="vign" src="/img/site/vign/vign_off.png" /><img class="valid" src="/img/site/unvalid.png" /></li>
    </ul>
</div>

</div>

When the user clicks over any element with the class vign that function is triggered twice, since I see two lines at the console log whilst there is only one click.

This fact breaks the objective of this function becasue the second time the image that has been changed to active(valid) is set to unactive(unvalid).

Is there around any ninja can explain me why it is triggered twice or if I am confusing about this, why the image is never changed when the user clicks.

I will appreciate. Thanks for your time for reading.

Best regards

EDIT: Adding information after the kind reply

If I modify the markup just for testing adding an id to one of the elements, let's say:

<img id="moteur_vignette" data-optionCode="<?php echo $optionCode ?>" class="vign" src="<?php echo $this->basePath()?>/img/site/vign/vign_off.png" />

inside the div->class->moteur

and I change the selector to attach the function to that click event:

jQuery('#moteur_vignette').on('click', function(e) {
... 
}

following the explanation, if I well understand it wouldn´t have to be triggered twice, but it does. So I am still confused.

Answer 1

You are seeing, I think, events triggered from two different elements. You have an img with class vign wrapped in a div with class #elements_hidden. So if you click the inner element and do not prevent the event bubbling, it will eventually bubble up to the outer element. Since you have used both classes in your jquery query, the click handler is attached to both of them.

Explanation in this SO question: What is event bubbling and capturing?