我现在有人问这个问题，但我对这个主题完全无知，而且我无法真正使用答案。我用教程制作了页面的每个脚本，但失败了。 我的问题:我有一个部分使用ajax从外部html加载内容(使用这个图: https://www.youtube.com/watch?v=dmfZp4iFzOs )，并且每次加载内容后我都必须运行js。但该脚本不起作用，因为它在我加载内容之前运行。
html(例如):
<body>
<ul>
<li><a class="menu" href="1.html">1</a></li>
<li><a class="menu" href="2.html">2</a></li>
<li><a class="menu" href="3.html">3</a></li>
</ul>
<div id="content_area"></div>
<script src="menu.js"></script>
</body>
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);
抱歉我的英语不好。请帮我!谢谢
最佳答案
jQuery 的 .load() 函数是一个异步操作，因此它会在完成之前“返回”。因此，您不必等待它返回，而是为其提供一个“回调”函数，它将在完成时调用该函数。像这样的事情:
$('#content_area').hide().load(href, function () {
init();
$('#content_area').fadeIn('normal');
});
请注意以下几点:
- 我还将
.fadeIn()调用移至回调内，因为您不希望在元素内容加载之前淡入元素。 - 这两个调用都封装在一个无名(匿名)
function () {}中。该函数本身就是一个传递给.load()函数的值，并将在.load()完成其工作时调用。
关于javascript - ajax内容加载后运行js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24698310/