Как определить высоту div после загрузки его содержимого через ajax с помощью jquery

У меня есть эта странная проблема: у меня есть два 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< /strong>, поэтому я добавил

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

в функциях click(), но высота #content вычисляется перед загрузкой файлов, поэтому это не работает. Как я могу определить, когда контент загружен, и после этого изменить размер?

PS: Проблема также в загрузке страницы: я добавил

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

внутри $(window).load для имитации щелчка по первому пункту меню; #content заполняется корректно, но высота просчитана.. Пробовал отлаживать с помощью console.log, отслеживая высоту div, но он выдал 0, хотя я поставил его после функции загрузки.

Единственным (плохим) решением было использование функции setInterval, постоянно отслеживающей высоту #content и устанавливающей ту же высоту в #menu.


html jquery css height
person sekmo    schedule 20.02.2013    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать функцию обратного вызова:

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

Однако, если вы загружаете изображения, вы должны прослушивать событие load, которое запускается для этих изображений, иначе высота будет рассчитана неправильно, есть несколько плагинов, которые вы можете использовать, например imagesLoaded.

person undefined    schedule 20.02.2013

arrow_upward
-1
arrow_downward

я думаю, вы должны сделать что-то вроде этого $("#menu").css('height', $("#content").height() + 'px'); вам нужно применить это после загрузки #content

person dinodsaurus    schedule 20.02.2013
comment
Заданный вопрос заключается в том, как применить изменение после загрузки внешнего файла. Приведенный код уже корректно устанавливает высоту, но не вовремя. - person dgvid; 20.02.2013