jQuery .load() 奇数

Question

我正在构建一个谷歌图像搜索的示例。我有一个图像网格(搜索结果)。当单击其中一张图像时，我正在使用 jquery 创建的部分标记中加载 html 文档。奇怪的是，如果你查看开发人员工具，html 已加载，但它没有呈现在屏幕上(至少不完全):html 有一个带有全局 src 链接、h1、p 和按钮标签的图像。我说它没有完全渲染，因为图像虽然是空的，但按钮位于屏幕上，但不是其他元素。

最奇怪的事情是，如果您单击另一个图像并再次加载 html 文档(现在您有两个，我正在处理这个问题)，这次 de 会发生同样的情况，只是图像渲染正确。

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

这是我的 jquery 代码

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

});

知道这里会发生什么吗？

========================编辑======================

首先，感谢您花时间阅读并回答我。

我发现这段代码的工作方式取决于浏览器，这让我有点惊讶，因为我正在使用最新版本的 Safari、Chrome 和 FireFox 进行测试。 在 Chrome 中，html 片段甚至无法加载。这似乎在 Safari 和 FireFox 上工作得很好，尽管某些元素(h1 和 p)仍然不可见(我在控制台上看到它们，但在屏幕上看不到它们。我尝试过 z-index 来强制它们，以防它们位于某些东西后面) )。

我会尽快制作 fiddle 。

再次感谢!

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');
    });
});