javascript - 在 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();
   }
});

另一方面，如果您想将处理程序绑定(bind)到将通过 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!")
});