溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了JS獲取動態添加元素的方法。分享給大家供大家參考，具體如下：
在頁面的渲染中,我們經常用遇到動態添加的DOM元素,那么在獲取這些元素的時候或則為這些DOM元素的時候,我們有下面三種處理方法:
一 在模板引擎里面添加行內事件
添加行內事件就是在標簽里面添加事件,這樣就可以直接獲取到動態添加的元素.
<!-- 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>
//事件函數,書寫在單獨的JS文件中
//帶有參數,參數是模板傳遞過來的
function updateUser (id,isDelete){
//doSomething.........
}
上面使用的模板是art-template,在模板里面我們給button標簽注冊了點擊事件onclick,但是事件函數卻是一個帶參數的函數.當點擊這個按鈕的時候,就會觸發點擊事件,進而調用updateUser()函數.
二. 利用事件的委托獲取(常用)
事件的委托可以為動態添加的元素綁定事件.
//同樣以上面的代碼為例,tr最后是添加到table中,那么將點擊事件委托給table
$('table').on('click','tr #btn-status',function(){
//doSomething........
})
上面的代碼意思是,將點擊事件綁定給table元素,但是我們點擊的是table里面的button按鈕,此時事件的冒泡起作用,向外冒泡遇到父元素table也有點擊事件,那么就會去執行這個事件.
三 在ajax的監聽響應完成函數后面獲取
當我們把模板渲染出來的時候,此時頁面上已經是最新的動態元素了,DOM也已經重繪完成,此時再去獲取動態元素.
$.ajax({
url : 'text.php',
dataType : 'json',
success : function(obj){
//渲染動態元素到頁面上
var trHTML = template('tpl-table',obj);
$('table').append(trHTML);
//獲取動態元素注冊點擊事件
$('tr #btn-status').on('click',function(){
//doSomething........
});
}
})
四 總結:
第一種方法要注意事件函數必須是全局函數;第二種最常用,但是三者的共同點都是當頁面已經渲染完畢后才能獲取到動態元素.
感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關于JavaScript相關內容可查看本站專題：《JavaScript操作DOM技巧總結》、《JavaScript頁面元素操作技巧總結》、《JavaScript事件相關操作與技巧大全》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
