jquery点击事件失效缘由和解决办法

在使用jQuery绑定点击事件的时候，有时候会遇到点击无效，这种状况大多出如今动态添加元素的时候

例如：给demo里添加li元素给li绑定点击事件

 $("#demo").append('<li>点我</li>'); 

给li元素绑定点击事件

// 示范一
$("#demo li").click(function(){
    alert($(this).html());
});
// 示范二
$("#demo li").on('click',function(){
    alert($(this).html());
});

这两种绑定方式，点击发现都不可以触发动态添加后的li元素

动态生成的标签事先绑定的点击事件点击了没反应。

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

那么，咱们应该使用什么来绑定动态元素呢，支持给动态元素和属性绑定事件的是live和on，其中live在JQUERY 1.7以后就不推荐使用了。如今主要用on，使用on的时候也要注意，on前面的元素也必须在页面加载的时候就存在于dom里面。动态的元素或者样式等，能够放在on的第二个参数里面。

例如：

$("#demo").on('click', 'li',function(){
    alert($(this).html());
});

// 或者

$(document).on('click', 'li',function(){
    alert($(this).html());
});