动态创建的iCheck复选框jQuery onChange事件无法触发问题

我看到你通过jQuery动态创建了带复选框的表格单元格，代码是这样的：

$('<td>').html('<input type="checkbox" class="batchCheckboxTransfer" name="batch[]" value="">')

而且已经让这些复选框正常显示了，但尝试用事件委托绑定change事件却没效果，你的绑定代码是：

<script> $('.box-body').on('change', '.batchCheckboxTransfer', function(){ alert('hello'); } </script>

问题排查与解决办法 #

首先最明显的问题是语法错误：你在调用.on()方法时没有正确闭合代码——函数定义后面少了一个右括号)，也没加结束的分号;。修正后的代码应该是这样：

<script> 
$('.box-body').on('change', '.batchCheckboxTransfer', function(){ 
    alert('hello'); 
}); 
</script>

如果修正后还是不行，再检查这两点：

• 确认.box-body是页面加载时就存在的静态元素：事件委托需要把事件绑定到已经存在的父元素上，如果.box-body也是动态生成的，那你得把事件绑定到更上层的静态元素（比如$(document)或者$('body')）上。
• 验证动态创建的复选框是否真的被添加到DOM中：你创建了<td>元素，但要确保你已经通过.append()或类似方法把它插入到页面的DOM结构里了，不然元素根本不在页面上，自然触发不了事件。

先试试修正语法错误，这应该是最可能解决问题的步骤！

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