Problem loading jQuery effects after loading content with AJAX
I have some jQuery effects that run on rollover areas on my page. These areas contain either images or text, and when you rollover them, a small bar slides up with more information. When you click on this bar that slides up, a "more info" area slides down underneath the image/text area. This all works fine so far, however I have a problem in the next part of the process.
Each of these areas is a DIV nested inside another DIV. I am changing the content of the child DIV every few seconds or so with different content (ie. switching images, or switching image to text, etc.) using AJAX. The idea is that even when the image changes, the jQuery slide up bar is still there and works as you rollover the area (whatever the content may be). I am not using the jQuery AJAX functions, but my own script that runs separately from jQuery. When the content changes with AJAX, the same HTML code for the slide up bars is loaded into the parent DIV each time. The slide up effect is called upon "mouseenter" (and slides back down on "mouseleave") of the parent DIV. As the parent DIV is not actually changed/reloaded itself with AJAX each time (the parent DIV is filled with the child DIV using an AJAX request), the sliding up works fine even after the content of the area has changed. However, when you click on the slide up bar to show more information, it doesn't work.
I am using the $(document).ready(function() { ... }); code to start the mouseenter and mouseleave events. I think that the jQuery (or the Javascript) doesn't know that this new content (which includes the slide up bar that has a jQuery click even to slide down the more information) has loaded as it is loaded remotely through AJA, and hence .ready() isn't working. Is there any way to force jQuery to check for if this new content is loaded?
I hope this makes sense and someone can help me, it is very important that I get this working soon.
Regards, and thanks in advance,
Niall