html - Using jQuery to count dynamic <li> elements by class using event handler -

i'm trying use jquery count ul li elements class. class being toggled on , off jquery script:

 $(document).ready(function(){  $(".checkbox1").click(function(){     $("li.tom").toggleclass( "hider" ); }); }); 

i understand means need add event handler listen changes in ul:

 $('.cartlist').on('click', 'li.hider', function () {      var total=$('.cartlist > li.hider').length;         $('.totalcount').html('$' +total * 999);      }); }); 

the script have written half works, in sense .on() handler using counts class hider, when li items clicked. no doubt because using .on('click'). i've read jquery docs .on() and, understand, should able use other dom hooks 'load', 'scroll' etc. however, when replace .on('click') .on('load') or .on('change'), nothing happens. also, unchecking checkboxes doesn't change total, because handler tied ul , doesn't care checkboxes...

fiddle

i new here , new jquery please forgive obvious gaps in knowledge. in anticipation replies.

you observing ul , not inputs:

$('.cartlist').on('click', 'li.hider', function () {... 

if instead observe inputs, method works:

$('form').on('click', 'input', function () { 

here jsfiddle: http://jsfiddle.net/c8ncf/