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，然后可以在以后再次访问该变量。

但是，如果您在newDiv返回之前访问success，则会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'）选择器获取对象

在AJAX调用后访问DOM对象？

6 个答案: