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