AJAX 调用后访问 DOM 对象？答案

【问题标题】：Accessing DOM object after AJAX call?AJAX 调用后访问 DOM 对象？
【发布时间】：2013-09-08 00:03:23
【问题描述】：

我有一个典型的 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(...)，但这并没有让我得到任何结果。

【问题讨论】：

a) 您是否验证了您的 ajax 请求确实有效（使用开发人员控制台、警报或萤火虫）以及 b) 它的输出是什么？
是的，请求工作正常。尝试访问成功调用之外的新 DOM 元素时的输出只是未定义。
AJAX 是异步的，所以 new_div 还没有被附加

标签： javascript jquery ajax dom

【解决方案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!")
});

【讨论】：

【解决方案2】：

如果您想将代码与回调解耦：

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

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

【讨论】：

【解决方案3】：

怎么样：

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

【讨论】：

我需要做很多额外的事情。不只是 show()。我需要在成功调用之外访问它。
你到底想做什么？
我真正想对 DOM 元素做什么？各种各样的事情。我还有许多其他函数需要访问新插入的 DOM 元素。
为什么不能从成功回调中调用这些函数？
我想我可以......只是试图不把大量的东西塞进那个成功回调中。这样做感觉很乱。

【解决方案4】：

假设返回的数据类似于<div id='new_div' />，然后尝试诸如

var newDiv = null;

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

这会将<div /> 添加到您的页面正文中，并将jQuery 元素分配给变量newDiv，然后可以在以后再次访问该变量。

但是，如果您在返回 success 之前访问 newDiv，它将是 null 或之前的值（如果之前已分配）。

【讨论】：

【解决方案5】：

其实这类事情可以通过以下方式解决：（我知道和其他的差不多，但更清楚一点）

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

【讨论】：

【解决方案6】：

我认为是 ajax 异步导致您提到的问题。

在 jQuery ajax 功能 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') 选择器获取对象

【讨论】：

【解决方案7】：

我有同样的问题，并找到了一个很棒的方法。

如果您的文件中有 jQuery 函数，例如 library_jquery.js，只需再次加载该文件即可成功。

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      //LOAD THE SCRIPT FILE AGAIN
      var path_script_file="libray_jquery.js";
      $.getScript(path_script_file);
   }
});

【讨论】：