AJAX載入了HTML但是HTML裡面的CLICK事件無效？

---

事件委託，ajax載入新dom之前js就載入完了，事件當然沒有綁定到新載入的dom上。

舉個例子，如果ajax載入了一個

&&


這個時候如果你的js中寫了$(".load").on("click",function(){ do something...});

事件是綁定不上去滴。

你需要$("body").on("click" , ".load" , function(){ do something ...});

原理很簡單，將事件委託到body（當然可以是其它父元素），等事件冒泡到父元素上面再進行事件處理。當然，如果你在body上綁定幾百個事件，基本上頁面就跪了。。。

so，還有一個方法，就是預判你要載入的dom，然後預先創建一個同樣的元素。

例如：你可以先在頁面中寫一個

&element&


然後將事件綁定到這個DOM上，ajax載入的時候只需要載入element

然後

$(".load").on("click" , function(){ do something ... });
.......
some code
.......
var $_load = $(".load"),
$load = $_load.clone(true),//true參數會將事件綁定克隆
$ele = $load.html(element);
$_load.after($ele);


當然，這種方法在一次性載入大量數據的情況下性能也非常堪憂。但是在零碎的不同類項的數據載入時比較方便。

---

使用委託或者重新綁定事件。

---

必須委託。

---

如果是用jQuery的話，載入的HTML元素是動態載入的內容，元素的事件必須是delegate或者on，老版本裡面有個live

原理是將事件冒泡到其父元素

---

需要用到事件委託，比如：

普通綁定事件：$(".btn1").click(function(){}綁定

on綁定事件：$(document).on("click",".btn2",function(){}綁定

---

意外解決js動態生成的html代碼中一些事件失效問題

做一個頁面功能，用ajax實現查看更多的效果。當用戶瀏覽到最後，點擊查看更多再追加一頁的數據到最後。

當然是用javascript更改html內容，把一頁的數據html追加到後面。然後追加的代碼中有一個class屬性，這個屬性將由一段javascript代碼控制顯示與否。可是追加出來的數據卻沒有這個效果。通過F12查看生成的HTML代碼，與有效果的無異。查找資料知道產生這個問題的原因是由於HTML都是頁面首次載入生成的，javascript也是頁面初次載入進來的。而通過點擊事件動態追加的HTML代碼可能不受影響。在糾結之後，突然想到，從javascript中找到根據class屬性控制的代碼，COPY一份放到追加HTML代碼的後面。也就是說，每次追加更多內容以後，再重新定義一次js事件。刷新頁面，測試，效果有了！！！！

謹以此文，碼下，以餉後人

---

推薦閱讀：