jQuery .load（）奇怪

Question

我正在构建谷歌图片搜索的示例。我有一个图像网格（搜索结果）。当我点击其中一个图像时，我正在使用jquery创建的section标签中加载html文档。奇怪的是，如果你看一下开发人员工具，html就会加载，但它不会在屏幕上呈现（至少不完全）：html有一个带有全局src链接的图像，h1，p和一个按钮标签。我说它没有完全渲染，因为图像虽然是空的，但按钮在屏幕上，但不是其他元素。

最奇怪的是，如果你点击另一个图像再次加载html doc（现在你有两个，我正在研究它），这次de发生相同的细，除了图像被正确渲染。 / p>

另外，我认为与此加载问题相关的是，我无法为任何加载的元素提供css属性。

这是我的代码jquery

$('img').click(function() {
$('<section id="imageSection"></section>').prependTo('body').load('imageDetail.html');
$('#placeHolder').attr('src','http://fillmurray.com/g/900/450');

}）;

知道这里会发生什么吗？

======================= edit ====================== < / p>

首先，感谢您抽出一些时间阅读并回答我。

我发现这段代码的工作方式与浏览器相同，这让我感到很惊讶，因为我测试的是最新版本的Safari，Chrome和FireFox。 在Chrome中，html片段甚至没有加载。这似乎在Safari和FireFox上运行良好，虽然有些元素（h1和p）仍然是不可见的（我在控制台上看到它们但在屏幕上看不到。我已经尝试过z-index强制它们，因为它们落后于某些东西）。

我会尽快做个小提琴。

再次感谢！

Answer 1

正如@matt-ball所说，你应该使用回调函数，因为.load()是异步的（see jQuery documentation）：

$('img').click(function() {
    $('<section id="imageSection"></section>').prependTo('body').load('imageDetail.html',function(){
        $('#placeHolder').attr('src','http://fillmurray.com/g/900/450');
    });
});