Question

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

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

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

现在我使用jQuery .load()方法将这个DIV与其他html文件一起填充（输入.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中

Answer 1

使用原生.load()回调：

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

或.ajaxStop()注册在所有Ajax请求完成时调用的处理程序。

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

Answer 2

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

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

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

在jQuery Ajax .load（）方法上引发加载的事件

2 个答案: