1. 程式人生 > >關於jquery 的繫結事件on 如何繫結動態生成的dom元素

關於jquery 的繫結事件on 如何繫結動態生成的dom元素

今天遇到個問題,在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頁面上根本沒有這個類,是假的,是化學的成分。。。