Использование jQuery для подсчета динамических элементов <li> по классам с использованием обработчика событий

Я пытаюсь использовать jQuery для подсчета элементов ul li с определенным классом. Класс переключается на другой скрипт jQuery:

 $(document).ready(function(){

$(".checkbox1").click(function(){
    $("li.tom").toggleClass( "hider" );
});
});

Я понимаю, что это означает, что мне нужно добавить обработчик событий для прослушивания изменений в ul:

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

    var total=$('.cartlist > li.hider').length;
        $('.totalCount').html('$' +total * 999); 
    }); });

Сценарий, который я написал наполовину, в том смысле, что обработчик.on(), который я использую, успешно учитывает класс hider, но только при нажатии на элементы li. Без сомнения, это потому, что я использую.on('click'). Я прочитал документы jQuery для.on(), и, насколько я понимаю, я должен использовать другие DOM-крючки, такие как "загрузка", "прокрутка" и т.д. Однако, когда я заменяю.on('click'), с.on('load') или.on('change'), ничего не происходит. Кроме того, снятие флажков флажками не изменяет итоговые значения, вероятно, потому, что обработчик привязан к ul и не заботится о флажках...

скрипка

Я новичок здесь и новичок в jQuery, поэтому, пожалуйста, простите очевидные пробелы в моих знаниях. Спасибо в ожидании любых ответов.