jQuery: handling events after an AJAX request

I stumbled on a curious problem with some AJAX links that retrieve HTML content from a PHP script. Basically, the content retrieved has the following form:

<p class="info">Info <img src="close.gif"/></p>

When I click on the link, the AJAX request takes place and correctly insert the above content. So far so good. The problem is that you can't attach a click event on the image (a closing button). I guess this is somewhat related to the event chaining after the DOMContentLoaded event takes place. A short-term solution would probably be a quick insertion of the AJAX content before the request is even performed, that is, I should fetch only the responseText of the request and inject it into a pre-formed DOM structure that will be hidden before the AJAX call (including the image), for example when the DOM is ready.

I ran a quick search on Google but results are really inconsistent. For example, this article shows you how to write accessible AJAX links with jQuery, but it doesn't say much about my particular problem. I'll let you know if my tests succeed. Stay tuned!

One thought on “jQuery: handling events after an AJAX request”

Leave a Reply

Note: Only a member of this blog may post a comment.