Many webdevelopers found a very boring error: Javascript don’t “see” elements in content loaded using AJAX method.
Let’s see how you can solve this problem.

Requirements

• Browser with the latest Javascript support(author’s choice)
• Text editor (author’s choice)
• Latest jQuery lib

The Function

We will use the live() function, added in the lastest version of jQuery.
See the description:

Added in jQuery 1.3: Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events.

How to use

Here you can see how to use this function, an example:

$("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
});

This will get all “p” tags and add an onclick javascript function to add another paragraph. You can see the live example here.

Using this function, the Javascript script will work in all elements added after the load of the script.
That’s it! See you in the next article. ;)