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 上设置相同的高度。

score 3 · Accepted Answer

您可以使用回调函数：

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

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

score -1 · Accepted Answer

我认为你应该做这样的事情$("#menu").css('height', $("#content").height() + 'px');你需要在#content加载后应用它

2 回答 2