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());
});