jQuery .change()仅在函数内生效？动态元素事件绑定失效排查

你的问题出在jQuery事件委托的参数顺序写错了，正确的事件委托写法应该是把静态父容器作为事件绑定对象，然后依次指定事件类型、目标元素选择器、回调函数。

错误原因分析 #

你当前的代码：

$('.check_if_checked').on('change', '#page-wrapper', function() {
    activate_step_2_button();
});

这里的参数顺序搞反了——你把目标元素（.check_if_checked）当成了事件绑定的载体，而把父容器（#page-wrapper）当成了过滤条件，这不符合jQuery事件委托的语法规则。而且如果.check_if_checked是Ajax动态生成的，页面加载时这些元素还不存在，直接绑定事件根本不会生效。

另外你说把绑定代码放进activate_step_2_button里能生效，是因为每次调用函数时，动态元素已经存在了，此时绑定是直接绑定到已存在的元素上，但这样会重复绑定事件，而且没法直接调用函数本身；控制台输入代码能生效也是因为此时动态元素已经加载完成。

正确的代码写法 #

把事件委托绑定到静态存在的父容器（比如#page-wrapper，确保它在页面加载时就存在），然后监听内部.check_if_checked元素的change事件：

// 事件委托：绑定到静态父容器，监听动态元素的change事件
$('#page-wrapper').on('change', '.check_if_checked', function() {
    activate_step_2_button();
});

// 独立定义函数，可被其他地方直接调用
function activate_step_2_button(){
    // do stuff
}

// Ajax返回后直接调用函数的逻辑保持不变
// 比如：
// $.ajax({
//   url: 'xxx',
//   success: function() {
//       // 动态创建内容后调用
//       activate_step_2_button();
//   }
// });

为什么这样能生效 #

1. #page-wrapper是页面加载时就存在的静态元素，事件绑定到它上面不会丢失
2. 当内部的.check_if_checked元素（无论静态还是动态创建）触发change事件时，事件会冒泡到父容器，被委托的监听器捕获，从而执行回调
3. activate_step_2_button是独立的函数，既可以被事件回调调用，也能在Ajax成功后或其他任何需要的地方直接调用

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