AJAX加載了HTML但是HTML里面的CLICK事件無效？

作者：太狼
鏈接：https://www.zhihu.com/question/23895785/answer/26573034
來源：知乎

事件委托，ajax載入新dom之前js就加載完了，事件當然沒有綁定到新載入的dom上。
舉個例子，如果ajax載入了一個

<span class="load"></span> 

這個時候如果你的js中寫了$('.load').on('click',function(){ do something...});
事件是綁定不上去滴。
你需要$('body').on('click' , '.load' , function(){ do something ...});
原理很簡單，將事件委托到body（當然可以是其它父元素），等事件冒泡到父元素上面再進行事件處理。當然，如果你在body上綁定幾百個事件，基本上頁面就跪了。。。
so，還有一個方法，就是預判你要加載的dom，然后預先創建一個同樣的元素。
例如：你可以先在頁面中寫一個

<span class="load load-hide">element</span> 

然后將事件綁定到這個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); 

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