Question

I am successfully loading content through the use of

jQuery(".menu li a").click( function(event){

    jQuery("#loadingArea").load(this.href)

});

After the content is loaded, I have new elements in my page. I have tried to apply jQuery manipulation (do something when I click or hover the mouse), and the element does not respond.

Please explain to me why I am unable to trigger events in content that has been loaded through ajax?

Does the method .load() has something to do with this (i.e. if I had used $.ajax I would be able to interact with such content)?

Thank you,

Answer 1

.live() is the answer to your problem:

http://api.jquery.com/live/

From the docs:

The .live() method is able to affect elements that have not yet been
added to the DOM through the use of event delegation: a handler bound
to an ancestor element is responsible for events that are triggered on
its descendants. The handler passed to .live() is never bound to an
element; instead, .live() binds a special handler to the root of the
DOM tree.