Запустить js после загрузки содержимого ajax

Я теперь задал этот вопрос, но я совершенно незнаю в теме, и я не могу использовать ответы. Я сделал каждый скрипт моей страницы с учебниками, но я не смог. Моя проблема: у меня есть раздел, где я загружаю контент из внешнего html с помощью ajax (используется этот tut: https://www.youtube.com/watch?v=dmfZp4iFzOs), и я должен запускать js после каждого раза, когда загружаю содержание. Но сценарий не работает, потому что он работает до загрузки содержимого.

Html (например):

<ul>
 <li><a href="1.html" target="_blank">1</a></li>
 <li><a href="2.html" target="_blank">2</a></li>
 <li><a href="3.html" target="_blank">3</a></li>
 </ul>

Меню menu.js:

$('.menu').click(function(){
 var href = $(this).attr('href');
 $('#content_area').hide().load(href).fadeIn('normal');
 return false;
});

Внешний html усложняется, но я должен запускать этот скрипт каждый раз, когда щелкнул (и загрузил) меню:

var init = function() {
 var box1 = document.querySelector('.container1').children[0],
 showPanelButtons = document.querySelectorAll('#show-buttons button'),
 panelClassName = 'show-front',

 onButtonClick = function( event ){
 box1.removeClassName( panelClassName );
 panelClassName = event.target.className;
 box1.addClassName( panelClassName );
 };

 for (var i=0, len = showPanelButtons.length; i < len; i++) {
 showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
 }

 document.getElementById('toggle-backface-visibility').addEventListener( 'click', function(){
 box1.toggleClassName('panels-backface-invisible');
 }, false);

};

window.addEventListener( 'DOMContentLoaded', init, false);

Извините за мой плохой английский. Пожалуйста, помогите мне! благодаря

2 ответа

.load() jQuery .load() - это асинхронная операция, поэтому она будет "возвращаться" до ее завершения. Таким образом, вместо того, чтобы ждать его возврата, вы предоставляете ему функцию "обратного вызова", которая будет вызываться при завершении. Что-то вроде этого:

$('#content_area').hide().load(href, function () {
 init();
 $('#content_area').fadeIn('normal');
});

Обратите внимание на несколько вещей здесь:

  1. Я переместил .fadeIn() в обратный вызов, так как вы не хотите исчезать в элементе до тех пор, пока его содержимое не будет загружено.
  2. Оба вызова завернуты в одну безымянную (анонимную) function() {}. Эта функция сама является значением, которое передается функции .load() и будет вызываться, когда .load() завершит свою работу.


Вместо использования "window.addEventListener(" DOMContentLoaded ", init, false);", вы можете использовать обратный вызов с функцией jquery load().

$('#content_area').hide().load(href, init).fadeIn('normal');

licensed under cc by-sa 3.0 with attribution.