Web Design

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.

As far as I know, the answer is that javascript is an old technology. It was made in a time where AJAX was a mere fantasy and was designed for simple interactions. It evolved, and UI elements became more complex to a point where some nerd thought it was a good idea to build his own library based on simple jacasvript principles.
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.