Executing JS in dynamically loaded content

Question

Hi All,
  I've started working on a project that loads all of the different pages content dynamically.
On the surface this seems simple enough, an AJAX call to a script that returns the content that is placed inside a DIV. Except that not only HTML but JS is returned as well. I'm seeing a lot of things like this:-

<img src="spacer.gif" height="1" width="1" onload="SOMEJSHERE"/>

Dotted in the code to execute JS functions. This doesn't provide the kind of HTML/JS code separation I've come to love using JQuery.
  I can understand that they don't want to load all the JS and HTML at once, there is an awful lot of it... But this just doesn't feel like the best way.

Some experience and suggestions please?

Lyle

Answer 1

hey i use "eval" to execute js dynamically.

e.g.

<script>
var strjs = 'function execute(){alert("foobaring");} execute();';

eval(strjs);

</script>

Answer 2

Have a look at the jQuery .live() event. It can apply behaviors (event bindings) to all current and future elements on the page, which match the given selectors.

This means that your newly-loaded HTML need not contain any script. Just make sure the loaded elements have the right selectors (class names and id's).