快捷導(dǎo)航

JQuery Ajax 異步操作之動態(tài)添加節(jié)點功能

更新時間：2017年05月24日 14:11:16 作者：丿Kiss丶小波

異步操作動態(tài)添加節(jié)點，導(dǎo)致在代碼中給添加的節(jié)點全局綁定事件或者獲取元素無效，問題出在哪里呢？下文給大家介紹下，感興趣的朋友參考下吧

異步操作動態(tài)添加節(jié)點，導(dǎo)致在代碼中給添加的節(jié)點全局綁定事件或者獲取元素無效，上代碼：

$(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('對不起，沒有數(shù)據(jù)可供操作！');
        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前后臺交互并動態(tài)添加的代碼；
//但是，如果你在該方法(showData())外面來給上述動態(tài)添加的a標簽添加事件或者獲取值的時候可能會出現(xiàn)無效的情況：
　　$('.remove').click(function(){
　　　　alert('這是刪除按鈕！');
　　});
　　//頁面中則不會彈出（這是刪除按鈕?。┑膹椏?

那么，問題出在哪里呢？

事實上，ajax從后臺獲取數(shù)據(jù)再顯示到我們的頁面中的過程是異步的，也就是說當我們利用ajax從后臺獲取值得時候，在ajax之后的代碼是一直往下執(zhí)行著走的，而不會等著你ajax獲取并創(chuàng)建節(jié)點完成后再往下繼續(xù)執(zhí)行，這便是異步請求的機制，對于這個問題我們怎么解決呢：

$(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('對不起，沒有數(shù)據(jù)可供操作！');
        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);
        // 當動態(tài)添加節(jié)點完成之后再給其中的按鈕綁定事件
        $('.remove').click(function(){
　　　　    　　　　alert('這是刪除按鈕！');
　　     　　　});
      },
      error:function (err) {
　　　　　　　　　　　alert(err);
　　　　　　　　}
    });
  }
}

將綁定事件的代碼改到ajax內(nèi)部，這樣讓動態(tài)添加完成之后再給其中的按鈕綁定事件，就可以達到我們所需要的效果了，這便是ajax的異步機制

以上所述是小編給大家介紹的JQuery Ajax 異步操作之動態(tài)添加節(jié)點功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: