I am trying to dynamically add javascript for new elements I obtain & add to the page through ajax. So I can dynamically add javascript using the createElement("script") and appendChild for elements already on the page, but for new elements I just added through ajax, that doesn't seem to work. Any suggestions how I can achieve this?
btw I am adding new DOM elements using .innerHTML += instead of appendchild for each, since there is quite a lot of new elements. Does that matter?
Thanks.
Best to employ the help of a framework like jQuery.
With the help of jQuery, the work of tracking and working with dynamically added DOM elements becomes trivial:
$.(document).on("click","#MyElement",function(){ //do stuff });
Good luck!
Instead of dynamically adding javascript, you should set aside dedicated functions in your <script> section in the header or as a separately sourced file. Once your elements are added, you should add event handlers that call these dedicated functions without needing to add javascript dynamically.
suppose you have loaded your contents to a container called with id="container" you might wanna use a selector like
$("#container img")
to get the elements and set the event handlers.
here is an example: http://jsfiddle.net/PTcw8/5/
innerHTMLandappendchildserve entirely different purposes. You should be careful in your use of either. You might also find it useful to play around withstyle.displayandstyle.visibiltyattributes.