Hover not working on AJAX

Question

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?

Answer 1

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