Is it possible to add JavaScript after page load and execute it

Question

Say I have a JavaScript function that is inserted into the page after page load how can I then call that function. For example lets keep things simple. Say I make an Ajax call to get the markup of the script and the following is returned:

<script type="text/javascript">
function do_something() {
    alert("hello world");
}
</script>

If I then add this markup to the DOM can I call do_something() later?

I'm use the jQuery JavaScript framework.

Answer 1

You could use the $.getScript(...) function of jQuery. Most often this meets the need for loading JavaScript asynchronously after the page has been loaded.

Here are the according docs: http://api.jquery.com/jQuery.getScript/

Basically you can do something like

$.getScript("http://myhost.com/scripts/myscript.js", function(){
   //at this point the script has been attached to the page and processed
   //you can use it here
});

Answer 2

Update Sorry, I missed that you were using jQuery. You can just do this with the string you're getting back:

$(str).appendTo(document.body);

...after which you can call do_something immediately; live example .

---

Original answer:

If you're in control of the other end (the part receiving the ajax call), just have it reply with straight JavaScript code, and instead of ajax use a script element:

 var script = document.createElement('script'); script.src = /* ...your URL...*/; document.body.appendChild(script); do_something(); 

The script is parsed and executed as soon as you append it to the document, as you can see from the above where I've happily called do_something immediately after doing the appendChild .

It's also possible to add the script text inline if you prefer.

Answer 3

Just use $('head').append('<script>...') to add the script to the page. jQuery has special routines for handling this and parsing the script tags and handling them appropriately for all browsers.