功能第一次不工作

Question

在下面的jquery代码checkBoxName.on('change', function() {将在第二次触发我会检查复选框后，我在复选框中调用功能fooonchange，为什么它不工作我第一次检查盒子？

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

如果你调用从复选框change事件处理foo()，那么所有foo()确实是安装另一个更改处理。它不会在当前事件中触发新的处理程序。

这也有点奇怪，你用$(document).ready()将foo包装进去。我不知道这是否会引起问题，但这并不是通常的做法，这表明您可能会尝试做一些您不曾解释的异常事情。

也许，你只是想从一开始安装的复选框处理器：

$(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>