Question

I’m placing content on my page through an ajax (post) request like so:

$("input#ViewMore").click(function() {             var data = { before: oldestDate, threadId: 1 };             $.post("/Message/More", data,function(html) {                 $('tbody#posts').prepend(html);                 return false;             },             "html");             return false;         }); 

with the html coming back looking something like:

<div id="comment">Message output <a href="#" id="quote">Quote</a></div> 

This is all working fine and dandy, everything appears as it should, no problems.

The problem occurs when I have an event hooked into the "quote" anchor that has been added through the ajax call. Specifically, a jQuery event on that anchor does not fire. Why?

For instance:

$("#quote).click(function() { ... }); 

Does nothing. Acts like there is no event on it. I know it is working on other anchors on the page that were not added through a ajax request, so there is not a code error there, plus if I refresh the page it will then fire correctly. Is there some reason that this is happening, do I need someway to reinitialize that event on the anchor tag somehow? Any ideas?

Working with jQuery 1.3.1 (didn’t work with 1.2.6 either) so I believe it is my implementation not code itself.

Answer 1

You can use Events/live of jQuery 1.3, live will bind a handler to an event for all current – and future – matched elements.