jQuery script not working after page is refreshed using pagination or Ajax in WooCommerce

Question

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.

Answer 1

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

});