知道在 div 中动态添加的数据何时完成加载

Question

我正在使用 ajax 将包含图像的 html 数据加载到我页面上的 div 中

$('#container').html(data)

假设变量data是ajax返回的， 我如何知道新数据（和图像）何时完成加载到容器中？

Answer 1

您正在寻找的是.promise().done()。这些在您想要等待在集合或 jQuery 对象上运行的任何和所有动画完成而不在单独的回调中传递代码的情况下也很有用。

如果您要对加载的内容调用代码或处理程序，那么您应该查看.load() 事件和委托事件处理程序。您可能不需要两者，但无论如何您都应该阅读、了解和理解它们。您可以在 .on() 方法的文档中阅读有关委派事件处理程序的信息。

委派事件处理程序快速总结

委托事件处理程序是您附加到您要侦听的内容的祖先元素（可能尚未加载或尚未加载）的处理程序。

以下是委托click 处理程序绑定到body 元素并设置为侦听具有类foo 的后代元素上的click 事件的示例。这意味着此处理程序将侦听属于 body 元素的后代的类 foo 的所有元素（即使是稍后添加但尚未加载到 DOM 中的元素）。

$("body").on("click", ".foo", function() {
    bar();
});

下面的内容完全相同，只是它只将处理程序绑定到绑定处理程序时存在的那些.foo 元素。处理程序不会侦听以后添加的任何 .foo 元素。

$(".foo").on("click", function () { 
   bar();
});

通过将选择器参数传递给.on() 方法，您可以告诉jQuery，与其监听绑定元素上发生的指定事件，不如监听源自于的传播（或冒泡）事件匹配给定选择器以到达绑定元素的后代，并且应该使用触发事件的后代作为处理程序的上下文对象 (this) 调用处理程序。

jQuery API 的相关链接

• deferred.promise() docs
• deferred.done() docs
• .load() docs
• .on() docs