jQuery如何为异步加载的ul节点下所有li元素绑定change事件？

结论 #

该场景使用事件委托方案时不需要搭配.each()方法，直接依托jQuery事件委托的冒泡匹配机制，即可完美覆盖异步加载的子元素事件绑定需求，比手动遍历绑定更简洁、兼容性更强。

具体实现 #

change事件实际由<input>复选框触发，建议直接将事件绑定到静态存在的父元素（尽量不要直接绑定到document，减少冒泡路径提升性能），写法如下：

// 如果ul.parent是页面初始就存在的静态元素，直接绑定到它本身即可
$('.parent').on('change', 'input[type="checkbox"]', function() {
  // 此处this指向触发事件的对应复选框元素
  const checkId = $(this).attr('id');
  const checkedStatus = $(this).prop('checked');
  // 你的业务逻辑
  console.log(`复选框${checkId}状态变为：${checkedStatus ? '选中' : '取消选中'}`);
});

如果ul.parent本身也是异步请求渲染的元素，只需要把事件绑定到它上层任意一个静态存在的父元素即可，比如绑定到document的写法：

$(document).on('change', '.parent input[type="checkbox"]', function() {
  // 业务逻辑和上面一致
});

补充说明 #

.each()方法仅在你需要对已渲染完成的元素做批量非事件类操作时才需要使用，比如页面初始化要把所有复选框默认设为选中：

// 仅用于批量操作已存在的元素，绑定事件不需要
$('.parent input[type="checkbox"]').each(function() {
  $(this).prop('checked', true);
});

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