jQuery中change方法绑定后alert不显示的问题排查与修复求助

我帮你排查了下问题，核心原因是你的代码在DOM元素加载完成前就执行了，导致jQuery找不到#checkIDGrid这个元素，事件自然绑定不上，alert也就不会触发啦。

为什么会出现这个问题？ #

浏览器是从上到下加载页面内容的，如果你的JS代码写在页面头部（比如<head>标签里），或者页面中#checkIDGrid元素还没被渲染出来时，代码就已经执行了，这时候$('#checkIDGrid')获取到的是空的jQuery对象，绑定change事件自然不会生效。

修复方案 #

把你的代码包裹在jQuery的DOM就绪回调函数里，确保代码只在页面所有DOM元素加载完成后再执行。jQuery提供了快捷写法$(function() { ... })，和$(document).ready(function() { ... })效果一致：

$(function() {
  $('#checkIDGrid').change(function() {
    alert("I am inside change");
    if(this.checked) {
      var returnVal = confirm("Are you sure?");
      $(this).prop("checked", returnVal);
    }
    // $('#textbox1').val(this.checked);
  });
});

额外小提示 #

当你通过$(this).prop("checked", returnVal)修改复选框状态时，如果returnVal和当前的选中状态不一致，会再次触发change事件。如果想避免这种重复触发，可以改用原生DOM属性直接赋值（不会触发事件）：

this.checked = returnVal;

内容的提问来源于stack exchange，提问作者user9502376