Using jQuery functions on AJAX retrieved content.
Most people after starting AJAX and jQuery scratch their heads on trying to understand why ajax manipulated content on their website cannot be further manipulated.
This nerd invented jQuery and nerds everywhere of all corners of the interwebs now appreciate. Not all heroes wear capes, but some of them definately love to code.
The DOM or Document Object Model is a map of all the elements on the page with their classses, ID's and properties etc.. and is built on the instant all the HTML is loaded and remains untouched until you refresh it. This means that even after you manipulate elements with AJAX, the DOM still remains the same and "thinks" nothing changed. You must refresh the DOM in order to take advantage of full data manipulation, and to enable you to re-manipulate the same element over and over.
They conveniently made this into its own function in jQuery, first with live(), then bind() and the most recently added function is on() which is what I use currently in my projects. To use is simple.
Observe the following html:
With the following jQuery AJAX:
Modifying the html into:
But when you want to update the AJAX returned elements INSIDE, nothing happens. This is because technically it was never added to the DOM.
Time to change your code to:
Do this and you will find you can not only manipulate AJAX returned data inside the target element, but you can also manipulate the target element itself over and over and over.