I have written a script to add a mouseover effect on the product archives of my Woocommerce Eshop page. The script works fine when the page is initially loaded. My problem is that when i click Pagination page 2,3,.. or use any Ajax filters the effect is lost. I have found this post that explains that the
ready(function)
works on page load only, but i am not sure how to make it work on my case. I am adding this script on the head of my WP website.
<script>
jQuery( document ).ready(function() {
///archive page mouseover
jQuery("li.product-type-simple").mouseover(function(){
jQuery(this).css("box-shadow", "5px 10px 46px #7a7b7c");
});
jQuery("li.product-type-simple").mouseout(function(){
jQuery(this).css("box-shadow", "unset");
});
jQuery("li.product-type-variable").mouseover(function(){
jQuery(this).css("box-shadow", "5px 10px 46px #7a7b7c");
});
jQuery("li.product-type-variable").mouseout(function(){
jQuery(this).css("box-shadow", "unset");
});
});
</script>
I need to make the above script work not only when hitting the refresh button but also when using Ajax functionalities like Ajax filters or Woo Commerce pagination.
Please use below script. You've to use following convention to trigger any event on dynamically rendered elements. Thanks :)
jQuery( document ).ready(function() {
jQuery(document).on("mouseover", "li.product-type-simple", function(){
jQuery(this).css("box-shadow", "5px 10px 46px #7a7b7c");
});
jQuery(document).on("mouseout", "li.product-type-simple", function(){
jQuery(this).css("box-shadow", "unset");
});
jQuery(document).on("mouseover", "li.product-type-variable", function(){
jQuery(this).css("box-shadow", "5px 10px 46px #7a7b7c");
});
jQuery(document).on("mouseout", "li.product-type-variable", function(){
jQuery(this).css("box-shadow", "unset");
});
});