jQuery click event firing twice?

Question

This is a fairly weird case, you can see the code here:

http://jsfiddle.net/zpZtH/2/

Answer 1

This is a common Bug in Javascript. you can find many articles around internet specially on SO for event being fired twice. You can try something like this

 $(document).on('click', '#task-list li', function(e)
 {
       alert('Hellow world');
       e.stopPropagation();
       return false;
 });

And it's definitely Javascript problem because if you hit google and search for event fire twice you will see that Angular, Jquery and backbone etc all are somewhere firing events twice or even thrice. So, it's seems that it's javascript behind this. And off course if you search this with Mozilla Developers Network then you can see experts have also said so.

Answer 2

http://jsfiddle.net/Cc55g/

You need to call event.preventDefault() within your click handler. This prevents the default click action from being executed once your custom function runs. The second alert is occurring because the form is being submitted.

Answer 3

you should not wrap input elements by using a label element, try this:

<label for="average-data" class="section-view-time-checkbox">
    <span class="custom checkbox checked"></span> Average  
</label>
<input type="checkbox" id="average-data" style="display: none;">

http://jsfiddle.net/zpZtH/7/