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?

You mean, the tooltip works, then you submit a form, and the tooltip stops working after that? — Jeremy Thille, Feb 21 '15 at 19:03

score 1 · Accepted Answer · edited May 23 '17 at 11:43

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();
    });
});

edited May 23 '17 at 11:43

Community

1
1

answered Feb 21 '15 at 19:04

Jackson

149
6

Thanks Jackson, that was exactly it. Thanks for the reading as well – fightstarr20 Feb 21 '15 at 19:09

score 0 · Answer 2 · answered Feb 21 '15 at 19:12

This is a very common question, unfortunately way too common, and has been answered many times before. So here is my standard answer.

You have to understand asynchronism.

When you bind $(".tooltip").hover in your $(document).ready function, $(".tooltip") does not exist yet. It's not originally in your DOM. It will be created a few moments later, when the ajax function ends, which takes some time (even a few milliseconds).

So $(".tooltip").hover(... does not do anything.

Then $(".tooltip") is being created.

Solution :

Wait for $(".tooltip") to be created, THEN bind a click to it :

$('#content').load('content.php', function(){ // Do your ajax call with load() or ajax()
     // this is the callback function. It will be executed after the load() finishes and content.php is fetched.

  $(".tooltip").hover(function(){
      $('.tooltip_message').fadeToggle();
  });
})

Jquery rollover not working after ajax form submit

2 Answers2