首頁 > web前端 > js教程 > 主體

JQuery Ajax 非同步操作之動態新增節點實例詳解

小云云
發布: 2018-01-10 13:45:30
原創
1447 人瀏覽過

非同步操作動態新增節點,導致在程式碼中給予新增的節點全域綁定事件或取得元素無效,問題出在哪裡呢?本文主要跟大家介紹JQuery 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 +=&#39;<p class="btnBox">&#39; +
               &#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>&#39; +
               &#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>&#39; +
             &#39;</p>&#39;;
        });$(&#39;body&#39;).append(newInfo);
      },
      error:function (err) {
         alert(err);
       }
    });
  }
}
//这是一段很明显的通过JQuery-ajax前后台交互并动态添加的代码;
//但是,如果你在该方法(showData())外面来给上述动态添加的a标签添加事件或者获取值的时候可能会出现无效的情况:
  $(&#39;.remove&#39;).click(function(){
    alert(&#39;这是删除按钮!&#39;);
  });
  //页面中则不会弹出(这是删除按钮!)的弹框;
登入後複製

那麼,問題出在哪裡呢?

事實上,ajax從後台獲取資料再顯示到我們的頁面中的過程是異步的,也就是說當我們利用ajax從後台獲取值得時候,在ajax之後的程式碼是一直往下執行著走的,而不會等著你ajax獲取並創建節點完成後再往下繼續執行,這便是異步請求的機制,對於這個問題我們怎麼解決呢:


$(function () {
  var IP = &#39;...&#39;; // 页面中的默认编号起始值 和  公用IP前缀
  showData();
  function showData() {
    if ($(&#39;.content&#39;)) $(&#39;.content&#39;).remove();
    $.ajax({
      url:IP + &#39;/get&#39;,
      type:&#39;get&#39;,
      success:function (data) {
        var newInfo = &#39;&#39;;
        if(!data) return alert(&#39;对不起,没有数据可供操作!&#39;);
        newInfo +=&#39;<p class="btnBox">&#39; +
               &#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="remove">删除</a>&#39; +
               &#39;<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="change">修改</a>&#39; +
             &#39;</p>&#39;;
        });$(&#39;body&#39;).append(newInfo);
        // 当动态添加节点完成之后再给其中的按钮绑定事件
        $(&#39;.remove&#39;).click(function(){
            alert(&#39;这是删除按钮!&#39;);
          });
      },
      error:function (err) {
           alert(err);
        }
    });
  }
}
登入後複製

 將綁定事件的程式碼改到ajax內部,這樣讓動態新增完成之後再給其中的按鈕綁定事件,就可以達到我們所需要的效果了,這便是ajax的非同步機制

相關推薦:

詳解jQuery實作動態新增節點與遍歷節點功能

PHP中開發XML應用程式基礎篇新增節點 刪除節點查詢節點查詢節_PHP教學

Mysql叢集新增節點水平擴充

以上是JQuery Ajax 非同步操作之動態新增節點實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!