Running javascript when adding it to the page's Html

Question

I have content on a webpage which is both sent from the server at page load, and updated frequently via AJAX. When it is loaded initally, I use $( function () {} ) to do binding and updating based on the news from the server. I want to be able to also run the code when it is repopulated, in particular to rebind click events and update with news from the server.

Is there any way to do this without doing a $.getScript separatley? I am somewhat confused on how running javascript applies when populating the screen via AJAX ( $('el').html( ... ) ) Because I often use this with included javascript and it works. Could anybody clear up how this works?

Answer 1

Bind events on newly added DOM nodes (Ajax or otherwise) using live.

Your included scripts will run when you add them to the DOM.

See this example.

Answer 2

With jQuery events if you want the event to apply to new elements you would use the .live() method.

However jQuery 1.3 doesn't support blur, focus, mouseenter, mouseleave, change, and submit events as live events. (change, submit, and blur/focus are on the roadmap for jQuery 1.4)

If you want to bind to any of the events not supported by .live() you could use the liveQuery plugin.