Clever Geek Handbook

JQuery HTML click on event twice

I have a custom select menu button and I have attached to the html click event to close . But the event fires twice.

http://jsfiddle.net/GnzBj/1/

$(function () {
    $('html').click(function () {
        console.log('html');
    });
});

Does anyone know why / how to prevent it from firing twice?

+3


source to share


1 answer


The reason the event fires twice is because you have the entire UI inside label

.

<div  ...>
    <label for="xmod-form-51183d51afa3d" ... >
        <select name="theme" id="xmod-form-51183d51afa3d" ...>
            ...
        </select>
        ...
    </label>
</div>

Clicking on a label also triggers a click event on the form element it belongs to.



If you remove the element label

, it works as expected: http://jsfiddle.net/GnzBj/5/ .

If you want it label

, keep it as little UI as possible, but clicking on it will still fire two events.

+5


source






More articles:


All Articles