如何通过带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 功能，持续观察＃内容的高度并在#menu上设置相同的高度。

Answer 1

您可以使用回调函数：

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

但是，如果要加载图像，则必须侦听为这些图像触发的load事件，否则高度计算不正确，您可以使用多个插件，如{{3} }。

Answer 2

我认为您应该这样做$("#menu").css('height', $("#content").height() + 'px');您需要在加载#content后应用此功能