在 jQuery Ajax .load() 方法上引发加载事件答案

【问题标题】：Raising a loaded event on jQuery Ajax .load() method在 jQuery Ajax .load() 方法上引发加载事件
【发布时间】：2012-10-15 14:13:01
【问题描述】：

我有一个应用程序，它有一个带有 DIV 的页面，当用户单击我的导航栏的一部分（包含在同一页面中）时，它会更改其内容。

这是我的单页应用程序中的 div

<div id="content">
</div>

现在我使用 jQuery .load() 方法用其他 html 文件填充这个 DIV（输入到 .load 方法中的 HTML 文件，我已经剥离了标签等......）

这是我的 JavaScript

$("#content").load("views/"+ pageName + ".html", function(){
// do stuff… like load JavaScript files, etc...
}).fadeIn("fast");

这工作正常，但是使用 .load() 带到页面的内容我希望在它加载到 DOM 后附加一个函数。

假设我使用上面的 JavaScript 从 HTML 页面加载（）以下内容

<p id="newText"> Blah blah blah blah blah blah blah blah blah blah blah</p>

我希望在加载后引发一个事件，但是我不确定我应该将它绑定到什么，例如 .live()、.on() 或 .ready()……我在想这样的事情……

$('#newText').load(function() { 
   alert("Handler for .load() called for newText. This is in the DOM and loaded!");
});

有人知道我应该怎么做吗？

* 更新 *

好吧，也许我需要解释一下...我从另一个开发人员那里继承了这个应用程序，我认为它是用一个糟糕的架构/模型构建的。无论如何，加载的页面或视图有很多隐藏的选项卡/切换内容（因此我不喜欢该架构），因此尽管加载了视图/HTML，但在首次加载时，其某些内容可能在 DOM 中不可用。这就是为什么我希望在使用 jQuery Ajax .load()

的基础上检测何时将某些内容加载到 DOM 中

【问题讨论】：

我可能不明白，但为什么不在你的第一个 $('#content').load(url, function() { //do stuff here }) 上使用回调呢？
更新了我的answer。

标签： javascript jquery

【解决方案1】：

使用原生的.load() 回调：

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

或者.ajaxStop() 注册一个处理程序，以便在所有 Ajax 请求完成时调用。

$('#result').ajaxStop(function() {
    alert('Triggered ajaxStop handler.');
});

【讨论】：

旁注：.ajaxStop() 仅识别 jQuery AJAX 调用，这意味着如果您使用常规 XMLHttpRequest 对象，如果您想依赖来自.ajaxStop()的回调，则必须将请求委托给 jQuery
我通过重写应用程序相当奇怪的架构解决了这个问题，所以答案本身并不能解决我的问题，但它是一个很好的答案。但是 RTFM 不受欢迎。

【解决方案2】：

您可以将函数传递给load，它将在加载完成后执行。

如果提供了“完成”回调，则会在后处理和 HTML 插入完成后执行。回调会为 jQuery 集合中的每个元素触发一次，并依次设置给每个 DOM 元素。

$('#result').load('ajax/test.html', function() {
  alert('Load was performed.');
});

【讨论】：