在AJAX调用后访问DOM对象？

我有一个典型的AJAX调用，它将一些HTML附加到当前页面。 我希望能够使用典型的jQuery选择器访问新插入的HTML。

这是我希望能够做到的……

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

#new_div将是我检索到的数据中的一些HTML元素。 我不一定要将事件附加到新元素（如click ），所以使用像.on()或.on()这样的东西在这里不起作用（据我所知）。

我尝试将$.ajax()调用设置为一个变量： var new_div = $.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

假设返回的数据类似于

那么请尝试诸如此类的内容

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

这会将

添加到页面主体，并将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函数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’）选择器获取对象