Although this question may have been asked before, I am completely unfamiliar with the subject and unable to apply the existing answers. Despite following tutorials for every script on my page, I have encountered a problem. Specifically, I have a section where I load content from an external HTML file using AJAX (following this tutorial: https://www.youtube.com/watch?v=dmfZp4iFzOs). However, I need to run a JavaScript function after loading each content snippet, but the script executes before the content is actually loaded.
Here's an example of the HTML structure:
<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>
The menu.js file:
$('.menu').click(function(){
var href = $(this).attr('href');
$('#content_area').hide().load(href).fadeIn('normal');
return false;
});
The external HTML file is complex, but I need to execute the following script each time a menu item is clicked and loaded:
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);
Apologies for any language errors in my communication. Any help would be greatly appreciated. Thank you!