1. 程式人生 > >ajax動態載入資料後的click事件問題

ajax動態載入資料後的click事件問題

問:
為什麼ajax加載出來的html,無法用選擇器繫結事件,但可以直接在html上使用onclick等事件?

如ajax 載入了<div class="div">div</div>
然後$('.div').click(function(){.....});click操作無效

但是如果載入 <div onclick=dofun("prameter")>div</div>
dofun 就可以被onclick觸發。

答:
因為先後順序的關係啊~用AJAX載入是非同步載入這個應該很清楚吧~既然是非同步載入那麼就是非同步的,也就是說當你的整個頁面載入完成後$('.div').click(function(){.....});

這句根本找不到你非同步載入的DIV,所以它就不會執行了,即使你之後再把<div class="div">div</div>這個載入進來,在瀏覽器也不會找到這個DIV的,因為瀏覽器在第一次載入的時候沒有找到它,並且瀏覽器在你載入進這個DIV來之後也不會重新渲染一次,所以找不到。

而你載入進來的<div onclick=dofun("prameter")>div</div>,是它去找的這個函式,而dofun這個函式是之前就被瀏覽器渲染過了,只是還沒有呼叫,而你新載入進來的DIV正好要呼叫之前就已經渲染好的函式,所以就可以使用了~

主要還是非同步和同步區別的關係~

其他答案:
(1)在html骨架載入完成 js初始化的時候,並不存在<span class="add">節點,所以他的繫結事件是無效的,可以將該事件繫結到document上通過這種事件委託的機制實現繫結 試試:$(document).on('click','span.add',function(){ ....});

(2)動態載入的資料中的某一標籤是不能直接用$(“標籤”).click事件的,可以用on、live、或者直接在標籤裡面寫他的onclick事件!