Jquery rollover not working after ajax form submit

Question

I have a really simple rollover created using jQuery which looks like this...

jQuery(document).ready(function() {
        jQuery(".tooltip").hover(function(){
            jQuery('.tooltip_message').fadeToggle();
        });
    });

It works great when the page is initially loaded. But when an ajax form is submitted for some reason the rollover no longer works.

I don't have a live example as the site is on my local server but do you think it could be to do with the way I am initialising it with document ready?

Answer 1

document.ready will bind the function when the element is present in the document. It wont bind the function for dynamically added element.

As you mentioned in your question that, this is not working after Ajax. So please bind the function with jQuery live/ On. bind vs live

jQuery(document).ready(function() {
    jQuery(".tooltip").live("hover",function(){
        jQuery('.tooltip_message').fadeToggle();
    });
});