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

问题在于首次更改时调用的包装函数。

删除它然后一切都会好的。

＆＃13;

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

＆＃13;

.hidden {
  display: none;
}

＆＃13;

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

＆＃13;

功能从第一次起不起作用

2 个答案: