通过AJAX加载内容后jQuery load（）事件没有触发

Question

我有一些代码可以执行以下操作：

1. 外部内容通过AJAX加载（视频缩略图）
2. 然后使用$（“＃content”）将新内容插入到div中。append（）;
3. 移动触摸滚动帮助器（iScroll）应用于此div。

然而，当DOM由于AJAX事件而发生更改时，jQuery“load”事件没有触发，这意味着初始化卷轴的调用过早发生（在内容中的图像加载之前），这意味着它通常不会得到了intiiallised。在不等待图像加载的情况下，内容框通常足够短，使得不需要滚动功能，但是当图像随后加载时，框不可滚动。

$("#videoList").append(videoThumbnails);

$(document).load(function () {
  // doesn't fire
  initScroller(); 
});

看起来jQuery的追加功能在所有HTML中引用的所有图片都已加载后才会阻止。

如何检测到AJAX函数加载的所有图像都已完成加载，以便在所有图像加载后调用initScroller（）函数？

Answer 1

好的，我在另一个类似的问题中找到了解决方案。事实证明，有一个jQuery waitForImages plugin完全符合我的要求：

所以我可以这样做：

$("#videoList").waitForImages(function () {
    // Fires when all images in the #videoList div have loaded
    initScroller();
});

Answer 2

您尝试使用的方法仅在加载页面时触发一次，但不会在您之后对DOM进行的更改中触发（例如，使用ajax插入内容）。

如果要观察DOM更改，可以使用DOMNodeInserted事件

$(document).bind("DOMNodeInserted", function(event) {   ....do stuff...here     });

但通常最好用ajax回调来触发它。

$('#targetElementForYourContent').load('server/url.html', function() {
     ...do stuff here....
});