jquery点击事件失效原因和解决办法

发现问题

在使用 jQuery 绑定点击事件的时候，如果被绑定的元素是动态添加的，大概率会出现点击无效的情况。

例如：给 testdiv 里动态添加 li 元素并给 li 绑定点击事件：

// 动态添加li元素
$("#testdiv").append("<li>点我测试</li>");
// 给li元素绑定点击事件-Click绑定
$("#testdiv li").click(function () {
    alert($(this).html());
});
// 给li元素绑定点击事件-on绑定
$("#testdiv li").on("click", function () {
    alert($(this).html());
});

这两种绑定方式，点击发现都不能够触发动态添加后的 li 元素。
动态生成的标签事先绑定的点击事件点击了没反应。

分析原因

推测上面这个监听函数，是在网页加载的时候就指定了对象,而通过代码追加，如通过 js 追加的元素，是不能匹配这个事件的。

解决方法

支持给动态元素和属性绑定事件的是 live 和 on，其中 live 在 jQuery1.7 之后就不推荐使用了。现在主要用 on，使用 on 的时候也要注意，on 前面的元素也必须在页面加载的时候就存在于 dom 里面。动态的元素或者样式等，可以放在 on 的第二个参数里面。

// 代码一：
$("#testdiv").on("click", "li", function () {
    alert($(this).html());
});

// 代码二：
$(document).on("click", "#testdiv li", function () {
    alert($(this).html());
});