функция не работает с первого раза

Question

в нижнем коде JQuery checkBoxName.on('change', function() { будет запущен после второго раза. Установите флажок, я вызываю функцию foo в onchange в поле, почему он не работает с в первый раз я поставлю флажок?

function foo (arg1,arg2,arg3) { 
    $(document).ready(function() { 
    $('#checkBox').on('change', function() { 

     if ($('#checkBox').is(':checked')) {//this is triggered after the second time i check the box 
     $('#errorDiv').removeClass(errorClass); 
     $('#submitBtn').removeAttr("disabled"); 
     } else { 
     $('#submitBtn').attr('disabled', 'disabled'); 
     $('#errorDiv').addClass(errorClass); 
     } 

    }); 
    }); 
} 

Answer 1

Если вы звоните foo() из обработчика событий изменения флажка, то все foo() делают это установить другой обработчик изменения. Он не будет запускать этот новый обработчик в текущем событии.

Это также немного странно, что вы обертываете вещи внутри foo с $(document).ready(). Я не знаю, вызывает ли это проблемы или нет, но это не обычный способ делать то, что предполагает, что вы можете пытаться сделать что-то необычное, что вы не объяснили.

Возможно, вы просто хотите, обработчик флажок установлен с самого начала:

$(document).ready(function() { 

    $('#checkBox').on('change', function() { 

     if ($('#checkBox').is(':checked')) { //this is triggered after the second time i check the box 
      $('#errorDiv').removeClass(errorClass); 
      $('#submitBtn').removeAttr("disabled"); 
     } else { 
      $('#submitBtn').attr('disabled', 'disabled'); 
      $('#errorDiv').addClass(errorClass); 
     } 
    }); 
}); 

Answer 2

Проблема для функции-оболочки, которая называется на первом изменении.

просто удалите его, тогда все будет в порядке.

$('#check-me').on('change', function(e) { 
 
    if (this.checked) { 
 
    $('#checked').removeClass('hidden'); 
 
    $('#unchecked').addClass('hidden'); 
 
    } else { 
 
    $('#checked').addClass('hidden'); 
 
    $('#unchecked').removeClass('hidden'); 
 
    } 
 
});

.hidden { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label> 
 
    <input type="checkbox" id="check-me" />Check me 
 
</label> 
 
<div class="hidden" id="checked">Checked</div> 
 
<div class="hidden" id="unchecked">Un Checked</div>