JS獲取動態(tài)添加元素的方法詳解

更新時間：2019年07月31日 10:35:20 作者：風銘大師

這篇文章主要介紹了JS獲取動態(tài)添加元素的方法,結合實例形式分析了js動態(tài)添加DOM元素及獲取已添加的DOM元素相關操作技巧,需要的朋友可以參考下

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

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

1. 在模板引擎里面添加行內(nèi)事件
2. 利用事件的委托獲取(常用)
3. 在ajax的監(jiān)聽響應完成函數(shù)后面獲取

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

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

<!-- 1.準備一個模板 -->
  <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ù),書寫在單獨的JS文件中
  //帶有參數(shù),參數(shù)是模板傳遞過來的
  function updateUser (id,isDelete){
      //doSomething.........
  }

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

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

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

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

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

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

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

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

四總結:

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

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。

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

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: