submenú clic evento no funciona / dispara

el código de clic para el menú principal funciona, los cambios de clase y todos, pero no en el submenú … no activan el comando de alerta cuando se hace clic en el elemento del submenú como alimentos o zapatos … activo

HTML

 

Home

this is the index page

  • FOOD
  • SHOES
  • CLOTHS

ART

this is art page

JS

 $(".page_products ul.productcat li").on('click', function (e) { var $this = $(this), // Class of the one to be shown subclazz = $this.data("class"); alert("button clicked"); $this.addClass('active').siblings().removeClass('active'); } $("ul.nav li").on('click', function (e) { var $this = $(this), // Class of the one to be shown clazz = $this.data("class"); $this.addClass('active').siblings().removeClass('active'); $('article > div').removeClass('show'); $('.' + clazz).addClass('show'); }); 

CSS

 body { width:1020px; margin:0 auto; position:absolute; } aside { float:left; display:block; width:20%; } article { float:right; display:block; margin-top:0; width:75%; } .page_home, .page_products, .page_art{ visibility:hidden; } .show { visibility: visible; } .sidebar { margin-left:10px; } .nav { display:block; margin-top:60px; list-style-type:none; } ul { list-style-type:none; color:#000; } .nav > li { background: #666 no-repeat; width:150px; height:65px; color:#000; } .nav >li:hover { background:#06F no-repeat; } .nav > li.active { background:#06F no-repeat; } .productcat > li { background: #666 no-repeat; width:150px; height:65px; color:#fff; display:inline; padding:10px; } .productcat>li:hover { background:#06F no-repeat; } .productcat > li.active { background:#06F no-repeat; } 

intenta usar

 $(".page_products ul.productcat li").on('click', function (e) { var $this = $(this); // Class of the one to be shown subclazz = $this.attr("class"); alert("button clicked"); $this.addClass('active').siblings().removeClass('active'); } 

Cambié

 subclazz = $this.data("class"); 

a

 subclazz = $this.attr("class"); 

y

 var $this = $(this), 

a

 var $this = $(this); 

Tienes 2 problemas con tu código …

Olvidó las llaves de cierre para el primer controlador de eventos.

 $(".page_products ul.productcat li").on('click', function (e) { var $this = $(this), // Class of the one to be shown subclazz = $this.data("class"); alert("button clicked"); $this.addClass('active').siblings().removeClass('active'); }); ^---- Missing closing braces here 

En segundo lugar, está utilizando data método de data para acceder a un método personalizado

  subclazz = $this.data("class"); 

Pero el HTML con el que está trabajando está en esta forma

 
  • FOOD
  • Entonces, si desea que su método de data funcione, se supone que su estructura HTMl debe ser

      
  • FOOD
  • Además, no está utilizando esta variable en ningún lugar de su código, lo que no es necesario. Y me sorprende que diga que su segundo controlador de eventos funciona después de su error de syntax.

    Hover funciona aquí en este caso, ya que el estilo se aplica mediante CSS y no javascript, y un error en javascript no tiene ningún efecto cuando se aplican los estilos.

    Siempre puede verificar los errores en js inspeccionando la consola en las herramientas del desarrollador.

    Comprobar violín