Simple click on labels makes double click

Question

I have a label and some functions running while clicking on it.

But when a click event is made, a double click event is done, then my functions run 2 times...

You can see a light example here

HTML:

<label>
<input type="checkbox" id="checkbox"> Click here
</label>
<input type="text" id="test" value="0"/> clicks​​​

JavaScript:

$(document).ready(function(){
    $('label').click(function(event) {
         $('#test').val(parseInt($('#test').val())+1);
         event.preventdefault();
    });
});​

• When we click on the checkbox, the clicks counter is +1 >> Ok
• When we click on the label, the clicks counter is +2 >> Nok

How to solve this problem ?

Edit

preventdefault() to preventDefault() fixed the double click, but now checkbox is not checked anymore...

Answer 1

Well this is interesting. You're seeing two click events, one of them from the checkbox input, and the other (of course) from the label. And it makes sense: Clicking a label is like clicking the checkbox the label labels, by design. Here's an updated fiddle showing what's happening.

So just hook click on the checkbox and don't hook it on the label:

$(document).ready(function(){
    $('#checkbox').click(function(event) {
        $('#test').val(parseInt($('#test').val())+1);
    });
});​

Updated fiddle

---

And as Rocket said in the question's comments: preventDefault has a capital D in it, so your code was throwing an exception. But you didn't want preventDefault anyway, because you want the checkbox to be checked.

Answer 2

A simple workaround is to ignore one of the call.. See below,

$(document).ready(function(){   
    $('label').click(function(event) {
        if (event.target.nodeName == 'LABEL') return;
        $('#test').val(parseInt($('#test').val())+1);         
    });
});

DEMO