CODEWITHSUNDEEP
javascriptjquery
Mukesh
Mukesh

Reputation: 7778

javascript on hover is not working on ajax load?

I am using following code for on hover.But this code does not work on ajaxload.

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.products-grid .item').hover(function(){ 
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
    }, function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    });
)};
</script>

I found alternate for this like following 

<script type="text/javascript">
        jQuery(document).on("hover",".products-grid .item", function () {
            jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
            jQuery(this).find('.pro-view').show();
        });

</script>

But I am not finding how to fix second function.

, function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    });

How to associate some thing like .on("hover",".products-grid .item", function () for second function as I used for first function

Upvotes: 0

Views: 155

Answers (2)

Adil
Adil

Reputation: 148110

You can use mouseleave and mouseenter instead of hover with on.

jQuery(document).on("mouseleave",".products-grid .item", function () {
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
});


jQuery(document).on("mouseenter",".products-grid .item", function () {
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
    jQuery(this).find('.pro-view').hide();
});

OR you can combine mouseenter and mouseleave

$(document).on({
    mouseenter: function () {
         jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
         jQuery(this).find('.pro-view').show();
    },

    mouseleave: function () {
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    }
}, '.products-grid .item');

Upvotes: 1

Jonathan Lonowski
Jonathan Lonowski

Reputation: 123423

'hover' isn't actually its own event, but a shorthand for 2 others:

Calling $(selector).hover(handlerIn, handlerOut) is shorthand for:

 $(selector).mouseenter(handlerIn).mouseleave(handlerOut);

For delegated binding, you can specify them directly:

jQuery(document).on({
    'mouseenter': function(){ 
        jQuery(this).find('.pro-review').animate({bottom:'0'}, 200);
        jQuery(this).find('.pro-view').show();
    },
    'mouseleave': function(){  
        jQuery(this).find('.pro-review').stop(true,true).animate({bottom:'-37'}, 200);
        jQuery(this).find('.pro-view').hide();
    }
}, '.products-grid .item');

Upvotes: 2

Related Questions