jquery - 如何在使用jquery通过ajax加载内容后检测div高度

Question

我遇到了这个奇怪的问题:我有两个 div，一个菜单和一个内容

<div id="menu">
  <a href="#" id="link1"> Link </a>
  <a href="#" id="link2"> Link </a>
</div>

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

当您点击链接时，div 会加载不同 html 文件的内容:

$('#link1').click(function() {
  $('#content').load('page1.html');
}
$('#link2').click(function() {
  $('#content').load('page2.html');
}

...它有效:-)

这样 #content 会改变它的高度，因为它被 html 文件“填充”了，我希望 #menu 与 具有相同的高度#content，所以我追加了

$("#menu").height($("#content").height());

在 click() 函数上，但是 #content 的高度是在加载文件之前计算的，所以它不起作用。如何检测内容何时加载并在加载后调整大小？

---

PS:问题也出在页面加载上:我加了

$('#prod1').click();

在 $(window).load 中，模拟点击第一个菜单项； #content 填充正确，但高度计算错误。我尝试使用 console.log 进行调试，跟踪 div 的高度，但它给出了 0，尽管我将它放在加载函数之后。

唯一(不好)的解决方案是使用 setInterval 函数，连续观察 #content 的高度并在 #menu 上设置相同的高度。

Answer 1

可以使用回调函数:

$('#link1').click(function(e) {
   e.preventDefault();
   $('#content').load('page1.html', function(){
      // ...
   });
});

但是，如果您正在加载图像，则必须监听为这些图像触发的 load 事件，否则高度计算不正确，您可以使用几个插件，例如 imagesLoaded .