本文實(shí)例講述了JS獲取動(dòng)態(tài)添加元素的方法。分享給大家供大家參考，具體如下：

在頁(yè)面的渲染中,我們經(jīng)常用遇到動(dòng)態(tài)添加的DOM元素,那么在獲取這些元素的時(shí)候或則為這些DOM元素的時(shí)候,我們有下面三種處理方法:

一 在模板引擎里面添加行內(nèi)事件

添加行內(nèi)事件就是在標(biāo)簽里面添加事件,這樣就可以直接獲取到動(dòng)態(tài)添加的元素.

<!-- 1.準(zhǔn)備一個(gè)模板 -->  <script id="tpl-table" type="text/html">    {{ each rows value key }}      <tr>        <td>            <button type="button" onclick="updateUser({{ value.id }} {{@ ','}} {{value.isDelete}})" id="btn-status" >按鈕</button>        </td>      </tr>    {{ /each }}  </script>

  //事件函數(shù),書(shū)寫(xiě)在單獨(dú)的JS文件中  //帶有參數(shù),參數(shù)是模板傳遞過(guò)來(lái)的  function updateUser (id,isDelete){      //doSomething.........  }

上面使用的模板是art-template,在模板里面我們給button標(biāo)簽注冊(cè)了點(diǎn)擊事件onclick,但是事件函數(shù)卻是一個(gè)帶參數(shù)的函數(shù).當(dāng)點(diǎn)擊這個(gè)按鈕的時(shí)候,就會(huì)觸發(fā)點(diǎn)擊事件,進(jìn)而調(diào)用updateUser()函數(shù).

二. 利用事件的委托獲取(常用)

事件的委托可以為動(dòng)態(tài)添加的元素綁定事件.

//同樣以上面的代碼為例,tr最后是添加到table中,那么將點(diǎn)擊事件委托給table$('table').on('click','tr #btn-status',function(){    //doSomething........})

上面的代碼意思是,將點(diǎn)擊事件綁定給table元素,但是我們點(diǎn)擊的是table里面的button按鈕,此時(shí)事件的冒泡起作用,向外冒泡遇到父元素table也有點(diǎn)擊事件,那么就會(huì)去執(zhí)行這個(gè)事件.

三 在ajax的監(jiān)聽(tīng)響應(yīng)完成函數(shù)后面獲取

當(dāng)我們把模板渲染出來(lái)的時(shí)候,此時(shí)頁(yè)面上已經(jīng)是最新的動(dòng)態(tài)元素了,DOM也已經(jīng)重繪完成,此時(shí)再去獲取動(dòng)態(tài)元素.

$.ajax({    url : 'text.php',    dataType : 'json',    success : function(obj){        //渲染動(dòng)態(tài)元素到頁(yè)面上        var trHTML = template('tpl-table',obj);        $('table').append(trHTML);        //獲取動(dòng)態(tài)元素注冊(cè)點(diǎn)擊事件        $('tr #btn-status').on('click',function(){            //doSomething........        });    }})

四 總結(jié):

第一種方法要注意事件函數(shù)必須是全局函數(shù);第二種最常用,但是三者的共同點(diǎn)都是當(dāng)頁(yè)面已經(jīng)渲染完畢后才能獲取到動(dòng)態(tài)元素.

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.Vevb.com/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專(zhuān)題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》