Hover not working on AJAX

ajax, html, jquery

Solution

To append these event handlers to dynamically generated elements, you need to bind to the `document` or another static parent element and then specify `.grid` as the second argument passed to `.on`.

The second argument is used as a filter to determine the selected elements that trigger the event. So when the event is fired it will propagate to the `document` or parent element selected by jquery. The event target will then be scrutinized using the selector provided as the second argument. If the target matches the second argument, (`.grid` in our case), the event is fired.

You can read more in the jQuery documentation.

Also, since your using `document.ready` there is no need for the short hand ready statement, `jquery(function($)`.

 $(document).ready(function () {
    $(document).on({
                mouseenter : function () {
                    $(this).find('.meta').stop().animate({
                        bottom:'0px'
                    },200);
                },

                mouseleave : function () {
                    $(this).find('.meta').stop().animate({
                        bottom:'-75px'
                    },200);
                }
            }, ".grid");   
     });

Problem

I have the below content that loads on through AJAX. ``` <div class="grid"> <div class="thumb"> <img alt="AlbumIcon" src="some-image.jpg"> <div style="bottom:-75px;" class="meta"> <p class="title">Title</p> <p class="genre"> <i class="icon-film icon-white"></i> Genre </p> </div> </div> </div> ``` Additionally, I have writen the following script in jquery that applies to the above 'div.grid'. ``` jQuery(function ($) { $(document).ready(function () { $(".grid").on({ mouseenter : function () { $(this).find('.meta').stop().animate({ bottom:'0px' },200); }, mouseleave : function () { $(this).find('.meta').stop().animate({ bottom:'-75px' },200); } }); }); }); ``` The script works fine when the page loads the first time. However, the hover effect doesn't work once the above div is generated via AJAX after clicking on an 'a' tag. I can't seem to figure out what's wrong here? New to all this. Can anyone help?

Original source