如何檢測DIV高度它的內容是通過AJAX加載使用jQuery

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

...和它的作品:-)

這樣的＃內容改變其高度，因爲它是「裝」與HTML文件，我想那#menu需要＃內容相同的高度，所以我追加

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

上點擊（）函數，但＃內容的高度在加載文件之前計算，所以它不起作用。 如何檢測內容何時加載並在此之後進行調整？

---

PS：這個問題也是在頁面加載：我添加

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

$（窗口）.load內，以模擬在第一個菜單項的點擊; #content正確填充，但高度失算。我試圖調試與console.log，跟蹤div的高度，但它給了0，雖然我把它放在加載函數之後。

唯一的（壞）解決方案是使用setInterval函數，連續觀察＃內容的高度並在#menu上設置相同的高度。

Answer 1

我認爲你應該做這樣的事情$("#menu").css('height', $("#content").height() + 'px');您需要#content加載

Answer 2

可以使用回調函數後，應用此：

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

但是，如果你是加載圖像，您必須聆聽針對這些圖像觸發的load事件，否則高度計算錯誤，您可以使用幾個插件，如imagesLoaded。