abstract:事件委托,ajax載入新dom之前js就加載完了,事件當然沒有綁定到新載入的dom上。舉個例子,如果ajax載入了一個<span class="load"></span>這個時候如果你的js中寫了$('.load').on('click',function(){ do something...});事件是綁定不上
事件委托,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,然后預先創(chuàng)建一個同樣的元素。
例如:你可以先在頁面中寫一個
<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參數(shù)會將事件綁定克隆 $ele = $load.html(element);$_load.after($ele);
當然,這種方法在一次性載入大量數(shù)據(jù)的情況下性能也非??皯n。但是在零碎的不同類項的數(shù)據(jù)載入時比較方便。