在AJAX調用之后訪問DOM對象？

Question

我有一個典型的AJAX調用，該調用將一些HTML追加到當前頁面。 我希望能夠使用典型的jQuery選擇器訪問新插入的HTML。

這里是想我能夠做到......

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
   }
});

$('#new_div').show();

#new_div將是我檢索到的數據中的一些HTML元素。 我不一定要附加事件到新的元素（如click ），因此使用類似.load()或.on()不在這里工作了（據我所知）。

我嘗試將$.ajax()調用設置為變量： var new_div = $.ajax(...)但這並沒有幫助我。

Answer 1

如果您想在將新內容插入DOM之后（或什至之前）立即處理新內容，也可以將其放入AJAX成功回調中：

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      $('#new_div').show();
   }
});

另一方面，如果您要將處理程序綁定到將通過ajax添加到頁面的內容，jQuery會這樣做：

$(document).on('click', '#new_div', function(){
  alert("This function is bound to all #new_div's click events, even if they are added to the DOM via ajax later!")
});

Answer 2

怎么樣：

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data).find('#new_div').show();
   }
});

Answer 3

如果要將代碼與回調分離：

functionWithALotOfStuffToDo = function(data){
  // do stuff here
}

$.ajax({
   url: url,
   success: functionWithALotOfStuffToDo
});

Answer 4

假設返回的數據類似<div id='new_div' />然后嘗試類似

var newDiv = null;

$.ajax({
    url: url,
    success: function(data) {
        newDiv = $(data).appendTo($('body'));
    }
});

這會將<div />添加到頁面的正文中，並將jQuery元素分配給變量newDiv ，然后可以在以后的階段再次訪問它。

但是，如果在返回success之前訪問newDiv ，則它將為null或以前的值（如果先前已分配）。

Answer 5

實際上，可以通過以下方法解決此類問題：（我知道它與其他方法相似，但更清楚一點）

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      afterHtmlAppendCallback();
   }
});
function afterHtmlAppendCallback()
{
    $('#new_div').show();
}

Answer 6

我認為這是ajax異步導致您提到的問題。

在jQuery中，ajax funciton API表示：執行異步HTTP（Ajax）請求。

如果要在請求后立即從ajax訪問數據

您應該將代碼放在ajax.success函數中，例如：

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      $('#new_div').show();
   }
});

或者將異步設置設為false

$.ajax({
   url: url,
   async:false,
   success: function(data) {
      $('body').append(data);
   }
});
$('#new_div').show();

這將確保$（'＃new_div'）選擇器獲取對象