快捷導(dǎo)航

JQuery Ajax 異步操作之動(dòng)態(tài)添加節(jié)點(diǎn)功能

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

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

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

$(function () {
  var IP = '...'; // 頁(yè)面中的默認(rèn)編號(hào)起始值 和  公用IP前綴
  showData();
  function showData() {
    if ($('.content')) $('.content').remove();
    $.ajax({
      url:IP + '/get',
      type:'get',
      success:function (data) {
        var newInfo = '';
        if(!data) return alert('對(duì)不起，沒(méi)有數(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);
　　　　　　　}
    });
  }
}
//這是一段很明顯的通過(guò)JQuery-ajax前后臺(tái)交互并動(dòng)態(tài)添加的代碼；
//但是，如果你在該方法(showData())外面來(lái)給上述動(dòng)態(tài)添加的a標(biāo)簽添加事件或者獲取值的時(shí)候可能會(huì)出現(xiàn)無(wú)效的情況：
　　$('.remove').click(function(){
　　　　alert('這是刪除按鈕！');
　　});
　　//頁(yè)面中則不會(huì)彈出（這是刪除按鈕?。┑膹椏?

那么，問(wèn)題出在哪里呢？

事實(shí)上，ajax從后臺(tái)獲取數(shù)據(jù)再顯示到我們的頁(yè)面中的過(guò)程是異步的，也就是說(shuō)當(dāng)我們利用ajax從后臺(tái)獲取值得時(shí)候，在ajax之后的代碼是一直往下執(zhí)行著走的，而不會(huì)等著你ajax獲取并創(chuàng)建節(jié)點(diǎn)完成后再往下繼續(xù)執(zhí)行，這便是異步請(qǐng)求的機(jī)制，對(duì)于這個(gè)問(wèn)題我們?cè)趺唇鉀Q呢：

$(function () {
  var IP = '...'; // 頁(yè)面中的默認(rèn)編號(hào)起始值 和  公用IP前綴
  showData();
  function showData() {
    if ($('.content')) $('.content').remove();
    $.ajax({
      url:IP + '/get',
      type:'get',
      success:function (data) {
        var newInfo = '';
        if(!data) return alert('對(duì)不起，沒(méi)有數(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);
        // 當(dāng)動(dòng)態(tài)添加節(jié)點(diǎn)完成之后再給其中的按鈕綁定事件
        $('.remove').click(function(){
　　　　    　　　　alert('這是刪除按鈕！');
　　     　　　});
      },
      error:function (err) {
　　　　　　　　　　　alert(err);
　　　　　　　　}
    });
  }
}

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

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

您可能感興趣的文章: