異步操作動態添加節點，導致在代碼中給添加的節點全局綁定事件或者獲取元素無效，上代碼：
$(function () { var IP = '...'; // 頁面中的默認編號起始值 和 公用IP前綴 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInfo = ''; if(!data) return alert('對不起，沒有數據可供操作！'); newInfo +='<div class="btnBox">' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">刪除</a>' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>' + '</div>'; });$('body').append(newInfo); }, error:function (err) { alert(err); } }); }}//這是一段很明顯的通過JQuery-ajax前后臺交互并動態添加的代碼；//但是，如果你在該方法(showData())外面來給上述動態添加的a標簽添加事件或者獲取值的時候可能會出現無效的情況： $('.remove').click(function(){ alert('這是刪除按鈕！'); }); //頁面中則不會彈出（這是刪除按鈕！）的彈框;那么，問題出在哪里呢？
事實上，ajax從后臺獲取數據再顯示到我們的頁面中的過程是異步的，也就是說當我們利用ajax從后臺獲取值得時候，在ajax之后的代碼是一直往下執行著走的，而不會等著你ajax獲取并創建節點完成后再往下繼續執行，這便是異步請求的機制，對于這個問題我們怎么解決呢：
$(function () { var IP = '...'; // 頁面中的默認編號起始值 和 公用IP前綴 showData(); function showData() { if ($('.content')) $('.content').remove(); $.ajax({ url:IP + '/get', type:'get', success:function (data) { var newInfo = ''; if(!data) return alert('對不起，沒有數據可供操作！'); newInfo +='<div class="btnBox">' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">刪除</a>' + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>' + '</div>'; });$('body').append(newInfo); // 當動態添加節點完成之后再給其中的按鈕綁定事件 $('.remove').click(function(){ alert('這是刪除按鈕！'); }); }, error:function (err) { alert(err); } }); }}將綁定事件的代碼改到ajax內部，這樣讓動態添加完成之后再給其中的按鈕綁定事件，就可以達到我們所需要的效果了，這便是ajax的異步機制
以上所述是小編給大家介紹的JQuery Ajax 異步操作之動態添加節點功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
