AddEventListener load on ajax load WITHOUT jQuery

Question

I have 4 html files and 4 javascript files. Each javascript file is loaded externally from each html file

index.html downloads javascript.js 1.html downloads javascript1.js 2.html downloads javascript2.js 3.html downloads javascript3.js

The problem I am facing is that index.html uses AJAX to load one of the other three pages when a certain button is clicked. Then what should happen is that the particular page will load its own appropriate javascript program, which at the end of this program contains window.addEventListener, which should run on load and run the registerListeners function. RegisterListeners then registers an event listener on a button on this page, which currentyl simply displays a warning for testing.

I realized that the "load" parameter for window.addEventLisener does not work if the page loads dynamically using ajax.

I cannot put all the code in the main javascript because it contains some getElementById calls that call elements from one of the numbered pages, which, if they are executed on loading on the main page, will generate errors because these specific identifiers do not exist yet .

This is homework, so I need to point it in the right direction with html5 and javascript WITHOUT jquery. I understand that it might be easier with jquery, but I need to figure out how to do this now.

Will there be such a thing as window.addEventListener ("AJAXload", someFunction (), false) ???

Answer 1

Instead of adding an event listener programmatically, you could insert a useful function in jQuery at the end of your AJAX content. This will be done when the content is loaded, invoking something in the parent window.

AJAX BLAH BLAH BLAH <script type="text/javascript"> childContentLoaded(); //or whatever you need </script> 

you may also need to add "parent" .functionName ()