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!
I'll be in ajax training next week. So I told myself I should browse around the web and have a little review on what I'm up into. Thanks for this post.