如何动态包含包含javascript的html文件

Question

in my website i have a simple navigation bar where clicking on the different items causes the main content to change. Technically, all is done in a single file "main.html", which contains everything and i use the jquery function "load" to dynamically load other html files to place it inside the main.html. This works just fine as long as there is no javascript in these html files i embedded. But there is one file i want to embedd, which has also javascript code in it, which should get executed on $(document).ready. But this never happens - there is no error in the javascript, it just never gets executed. I suppose it's because i only change the DOM of the "main.html" and then there will be no "onReady" event fired. Can someone give me some idea of what would be the best way to get the desired behaviour? Placing the javascript in the "main.html" would cause things to work, but this is no option for me.

Thanks in advance!

update: problem solved Problem is solved. When i call the javascript outside the onReady() event (as Loic Coenen suggested), it works just as excpected. I also removed the tags wrapped around. Many thanks to all who helped me!

Answer 1

you are in main.html that contains a head, body. the problem might be that when you load the page your other page also has a head, and body and so on, if you are loading onto a div, it should be only code, can be javascript aswell, but no head or body. but if you resist, here is your solution

$("#loadnewpagebttn").load(location.href+" foobar ",function(){
    $.getScript("js/yourscript.js"); 
});

you need to create a script file for that page and load it. inline scripts are some what of a bad habit anyways

full example:

jQuery.getScript( url, [ success(data, textStatus) ] )
url - A string containing the URL to which the request is sent.

success(data, textStatus) - A callback function that is executed if the request succeeds.

$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

http://api.jquery.com/jQuery.getScript/

Answer 2

You can trigger a custom event to notify your other.html script that the tree is loaded. I haven't tried it, but I would use something like that :

In main.html:

$('#div_to_load').load('other.html',{},function(){
    $('#div_to_load').trigger('loaded')
})

In other.html

$('#div_to_load').on('loaded', function(){
     // Code to execute  
})

I don't know if that could do the trick.

Edit : I asume that the javascript directly included in your other.html is executed anyway.