jquery - Triggering event when clicked on <li> background, checkbox and label -

hello , know there few same problems around, couldn't find solution answers given on them, im first time posting here.

i have simple li , label inside of it

<li class="task">     <input type="checkbox" id="task-1" />     <label for="task-1">random text></label> </li> 

and jquery triggering "done" class is:

$(".task").click(function (e) {     var cb = $(this).find(":checkbox")[0];     if (e.target != cb) cb.checked = !cb.checked;     $(this).toggleclass("done", cb.checked); }); 

this works fine when clicked on checkbox or on li background, doesn't work when clicked on label.

my jquery works when clicked on checkbox , label, not on background is:

$(".task input").change(function () {     $(this).closest('.task').toggleclass('done', $(this).is(':checked')); }); 

how can create jquery activate event when clicked on checkbox, label, or background of li? thank , sorry mistakes during post.

fiddle: https://jsfiddle.net/0j7e69o1/2/

this because label has default click functionality means gives focus element id referenced in it's for attribute. it's doing when click.

you can remove for attribute fix this, in example:

https://jsfiddle.net/0j7e69o1/3/

preferred: solution prevent default click javascript:

$('.tasks label').click(function(e) { e.preventdefault(); } );

here bind click event every label within tasks element , use preventdefault() (more here) stop default event occuring. preferred leaves mark-up it's helpful for attributes intact!

https://jsfiddle.net/0j7e69o1/5/