Javascript 由于单击以更新，Jquery的元素计数出错

我使用span class check_box和uncheck_box计算元素的数量。单击带有复选框的项目时，其span将更改为uncheck box，反之亦然。计数器在某种程度上起作用，但是，我需要先单击一个元素来触发它（计数应该已经改变了），然后当我第二次单击一个元素时，计数就会改变。在这种情况下，我应该有两个计数，但我只有一个

如何纠正这一点

HTML:

更改元素的Jquery

(function($){
        $('li.todo').click(function(){
            if($(this).find('.uncheck_box').length >0){
                var _t=$(this).find('.uncheck_box');
                _t.removeClass('uncheck_box');
                _t.addClass('check_box');
                m_val='1';
                $(this).find('a').addClass('strike');
            }else{
                m_val='0';
                var _t=$(this).find('.check_box');
                _t.removeClass('check_box');
                _t.addClass('uncheck_box');
                $(this).find('a').removeClass('strike');
            }
        var m_key=jQuery(this).attr('id');
            jQuery.ajax({
              type: "POST",
              url: "<?php echo get_template_directory_uri(); ?>/ajax_get.php",
              data: { meta_key: m_key, meta_value: m_val},
               beforeSend: function(   ) {
                 //jQuery(this).attr("disabled", true);       
              },
              success:function(){}
            })
        });

（函数（$）{
$（'li.todo'）。单击（函数（）{
if（$（this）.find（'.uncheck_框'）。长度>0）{
var _t=$（this）.find（'.uncheck_-box'）；
_t、 removeClass（“取消选中复选框”）；
_t、 addClass（“复选框”）；
m_val='1'；
$（this.find（'a'）.addClass（'strike'）；
}否则{
m_val='0'；
var _t=$（this.find（'.check_box'）；
_t、 removeClass（“复选框”）；
_t、 addClass（“取消选中复选框”）；
$（this.find（'a'）.removeClass（'strike'）；
}
var m_key=jQuery（this.attr（'id'）；
jQuery.ajax({
类型：“POST”，
url:“/ajax\u get.php”，
数据：{meta_key:m_key，meta_value:m_val}，
beforeSend:函数（）{
//jQuery（this）.attr（“disabled”，true）；
},
成功：函数（）{}
})
});

这里的第一个问题是类更改处理程序注册到

li

元素（利用事件冒泡）其中，计数器处理程序注册到锚元素。因此，在更新类之前，将执行锚处理程序，因此将单击处理程序附加到

li

元素，而不是锚元素

var $checkboxes = jQuery('li.todo'),
    $completeCount = jQuery('.complete-count'),
    $incompleteCount = jQuery('.incomplete-count');

var updateCount = function(){
    $completeCount.text(jQuery('.check_box').length);
    $incompleteCount.text(jQuery('.uncheck_box').length);
};

$checkboxes.on('click', updateCount);
updateCount();

还要确保在注册类更改处理程序之后注册此事件处理程序

---

更好的解决方案是使用自定义事件，该事件将在类更改后触发

$('li.todo').click(function () {
    if ($(this).find('.uncheck_box').length > 0) {
        var _t = $(this).find('.uncheck_box');
        _t.removeClass('uncheck_box');
        _t.addClass('check_box');
        m_val = '1';
        $(this).find('a').addClass('strike');
    } else {
        m_val = '0';
        var _t = $(this).find('.check_box');
        _t.removeClass('check_box');
        _t.addClass('uncheck_box');
        $(this).find('a').removeClass('strike');
    }

    //trigger a custom event here
    $(this).trigger('updateclass')

    var m_key = jQuery(this).attr('id');
    jQuery.ajax({
        type: "POST",
        url: "<?php echo get_template_directory_uri(); ?>/ajax_get.php",
        data: {
            meta_key: m_key,
            meta_value: m_val
        },
        beforeSend: function () {
            //jQuery(this).attr("disabled", true);       
        },
        success: function () {}
    })
});

---

正在更改

复选框的处理程序在哪里执行该处理程序后您的计数器处理程序需要执行更新我的代码以显示该处理程序
var $checkboxes = jQuery('li.todo'),
    $completeCount = jQuery('.complete-count'),
    $incompleteCount = jQuery('.incomplete-count');

var updateCount = function(){
    $completeCount.text(jQuery('.check_box').length);
    $incompleteCount.text(jQuery('.uncheck_box').length);
};

$checkboxes.on('click', updateCount);
updateCount();

$('li.todo').click(function () {
    if ($(this).find('.uncheck_box').length > 0) {
        var _t = $(this).find('.uncheck_box');
        _t.removeClass('uncheck_box');
        _t.addClass('check_box');
        m_val = '1';
        $(this).find('a').addClass('strike');
    } else {
        m_val = '0';
        var _t = $(this).find('.check_box');
        _t.removeClass('check_box');
        _t.addClass('uncheck_box');
        $(this).find('a').removeClass('strike');
    }

    //trigger a custom event here
    $(this).trigger('updateclass')

    var m_key = jQuery(this).attr('id');
    jQuery.ajax({
        type: "POST",
        url: "<?php echo get_template_directory_uri(); ?>/ajax_get.php",
        data: {
            meta_key: m_key,
            meta_value: m_val
        },
        beforeSend: function () {
            //jQuery(this).attr("disabled", true);       
        },
        success: function () {}
    })
});

var $checkboxes = jQuery('li.todo'),
    $completeCount = jQuery('.complete-count'),
    $incompleteCount = jQuery('.incomplete-count');

var updateCount = function(){
    $completeCount.text(jQuery('.check_box').length);
    $incompleteCount.text(jQuery('.uncheck_box').length);
};

$checkboxes.on('updateclass', updateCount);
updateCount();