關於jquery 的繫結事件on 如何繫結動態生成的dom元素
阿新 • • 發佈:2019-01-10
今天遇到個問題,在table裡面動態更新資料,然後每一行會繫結相應的點選事件
我原本是想用 可作用於未來元素的on方法,但是實際上還是沒有起作用,程式碼如下:
$(".form-table tbody tr").on("click",function () {})
這段程式碼在頁面載入時的表格中是起作用的,但是當ajax動態更新表格資料之後就不起作用了,原因是jq讀到這段程式碼時,瀏覽器還沒更新html程式碼呢所以找不到,也觸發不了點選事件。
解決方法:
$("body").on("click",".form-table tbody tr",function () {})
具體引數資訊:
1 |
on(events,[selector],[data],fn)
|
events:一個或多個用空格分隔的事件型別和可選的名稱空間,如"click"或"keydown.myPlugin" 。
selector:一個選擇器字串用於過濾器的觸發事件的選擇器元素的後代。如果選擇器為null或省略,當它到達選定的元素,事件總是觸發。
data:當一個事件被觸發時要傳遞event.data給事件處理函式。
fn:該事件被觸發時執行的函式。 false 值也可以做一個函式的簡寫,返回false。
PS:引用
有人提出了事件委託,那麼對於這種動態新增的事件,我建議這麼寫:
function $domOfSth(text){
return $("<a href='#' class='tseleced btn_confirm'>"+text+ "<span class='tags_closebtn'>X</span></a>").on('click','.tags_closebtn',function(){
console.log('xxxx');
});
}
$('#xxx').append($domOfSth('xxx'));
這樣的優勢在於:
-
在$domOfSth函式裡面,這個dom可以繫結事件的寫法相當靈活
-
對於事件一目瞭然,可維護性好
-
事件絕對牢牢繫結在插入dom上,不會因為js讀到
$(".tags_closebtn")
這一句的時候,頁面找不到這個物件的尷尬。。。
這個尷尬剛好是你點選事件未繫結到插入的dom上的原因。因為,js讀到$(".tags_closebtn").on('click')
的時候,瀏覽器還沒更新html程式碼呢,然後jq就跑去找,發現tm頁面上根本沒有這個類,是假的,是化學的成分。。。