功能第一次不工作

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>