He escrito un script para agregar un efecto de mouseover en los archivos de productos de mi página de Woocommerce Eshop. El script funciona bien cuando la página se carga inicialmente. Mi problema es que cuando hago clic en la página de Paginación 2,3,... o uso cualquier filtro Ajax, el efecto se pierde. He encontrado este post que explica que el
ready(function)funciona solo en la carga de la página, pero no estoy seguro de cómo hacer que funcione en mi caso. Estoy agregando este script en el encabezado de mi sitio web de WP.
<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>Necesito hacer que la secuencia de comandos anterior funcione no solo al presionar el botón de actualización, sino también al usar las funcionalidades de Ajax como los filtros Ajax o la paginación de Woo Commerce.
Utilice el siguiente script. Debe usar la siguiente convención para desencadenar cualquier evento en elementos renderizados dinámicamente. Gracias :)
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"); }); });