jQuery element click after AJAX -

my project has page using jquery ui tabs. each tab calls file using ajax, each presenting list. each <li> element of lists has child element <input type = "checkbox" />.

what need checkbox element checked or unchecked (depending on previous state) when click anywhere on <li>.

i have tried using function <li onclick = "javascript: checkboxclick();"> , worked fine, until user trying click on actual checkbox. then, function running simultaneously checkbox's action causing them cancel each other.

i've tried using similar version of function on $(document).ready() in order exclude the checkbox child firing function, lists created ajax , there not part of initial dom. function did not work. tried using click instead of on(), since according w3schools on() method explanation states "the on() method work both current , future elements (like new element created script)." , had no success.

the latter try this:

$("li.single-line.restore-manager").on("click", function () {     //code  }).children('input[type="checkbox"]').click(function (e) {      return false; }); 

and nothing happens.

any ideas of how make work?

is you're looking for?

$(document).on("click", "li.single-line.restore-manager", function (e) {     if (e.target.nodename != "input") {         var mychks = $(this).children(":checkbox");         $.each(mychks, function () {             if ($(this).is(":checked") === true) {                 $(this).prop("checked", false);             } else {                 $(this).prop("checked", true);             }         });     }; }); 

jsfiddle