How to dynamically include a html file containing javascript

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\", wh

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/