8

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

4

7 回答 7

14

如果您想在将新内容插入 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!")
});
于 2013-09-04T13:05:17.603 回答
3

如果您想将代码与回调分离：

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

$.ajax({
   url: url,
   success: functionWithALotOfStuffToDo
});
于 2013-09-04T13:05:09.047 回答
2

怎么样：

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data).find('#new_div').show();
   }
});
于 2013-09-04T13:02:04.623 回答
1

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

var newDiv = null;

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

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

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

于 2013-09-04T13:07:39.567 回答
1

实际上这种事情可以通过以下方式解决：（我知道它与其他类似，但更清楚一点）

$.ajax({
   url: url,
   success: function(data) {
      $('body').append(data);
      afterHtmlAppendCallback();
   }
});
function afterHtmlAppendCallback()
{
    $('#new_div').show();
}
于 2013-09-04T13:15:46.687 回答
1

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

在 jQuery ajax 功能 API 中说：执行异步 HTTP (Ajax) 请求。

如果您想在请求后立即从 ajax 访问数据

你应该把你的代码放在 ajax.success 函数中，比如：

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

或者将 async 设置为 false

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

这将确保 $('#new_div') 选择器获取对象

于 2013-09-04T13:17:08.250 回答
0

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

例如，如果您在文件中有 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);
   }
});
于 2021-09-03T09:49:30.763 回答