jquery .hover not working on AJAX rendered elements

jquery .hover not working on AJAX rendered elements

I have some elements that are created from an AJAX call. Within those elements, there is a child element that when hovered needs to show another child element that was dynamically created. When I run the .hover jquery in a fiddle, it works fine. When I implement it in my code, it doesn't want to work.

I was wondering if it depends on when the .hover script is loaded vs when the elements are loaded from AJAX. Does one need to go before the other? Should a .promise be enacted to wait for the AJAX elements to load before the .hover script is run?

Here is a fiddle of my example.

Answer by Ivan Marjanovic for jquery .hover not working on AJAX rendered elements

You need to execute .hover script in success callback of AJAX after you insert elements.

Answer by Klevis Miho for jquery .hover not working on AJAX rendered elements

If the content is generated with Ajax, you should use livequery

Answer by Vohuman for jquery .hover not working on AJAX rendered elements

For dynamically generated elements, events should be delegated from one of static parents of the element or document object, you can use on or delegate method.

$(document).on({      mouseenter: function() {          $(this).next('.show').fadeIn(800);      },      mouseleave: function() {          $(this).next('.show').delay(800).fadeOut(800);      }  }, '.touch');  

Answer by lnrbob for jquery .hover not working on AJAX rendered elements

I understand your question to mean that you are attaching an event to an element that may not exist yet. Instead of binding to the element (which .hover() is shorthand for) you should delegate it to a permanent container element. You can do this with either delegate() or .on() depending on jQuery version.

Here's what it would look like in your fiddle: http://jsfiddle.net/7dcuh/15/

Answer by sourRaspberri for jquery .hover not working on AJAX rendered elements

This may not be the correct answer but I've found elements that are created within a function. Need their selector to be declared within the function. Like so:

function createEle(){      $('#element').after('
');      $('#newEle').hover(function(){          $('#inner','#newEle').show();      },function(){          $('#inner','#newEle').hide();      });  }  

Answer by Derek for jquery .hover not working on AJAX rendered elements

Check out deferred events using the .on() function. You can do an event like:

$('#parent').on('hover', '.touch', function() {      $(this).next('.show').fadeIn(800);  },  function(){      $(this).next('.show').delay(800).fadeOut(800);  });  

OR, the pure CSS solution would be:

.touch + .show {      display:none;  }  .touch:hover + .show {      display:block;  }  

Answer by john Smith for jquery .hover not working on AJAX rendered elements

You should try to insert the script inside the ajax response. like

or you serve the script when the ajax call is complete or success

jQuery.ajax({    success:function(){jQuery('selector').yourfunction();},            });  

if you dont, the script will run and not find the selectors in the dom and the script wont run again

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72