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: ``` Click here 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...

Accepted Answer

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.

Simple click on labels makes double click

Solution

Problem