El evento de clic de jQuery no se activa en optgroup

Tengo el siguiente código – ejemplo en jsFiddle

  Option 1 Option 2   Option 1 Option 2  ​ 

y algo de código jquery:

 $(document).ready(function() { $("select optgroup").click(function() { alert("Clicked " + $(this).attr("label")); }); 

Esto parece bastante sencillo. Si agrego onclick="javascript:alert(...);" Eso parece funcionar … excepto que el clic se dispara sin importar en qué se haga clic.

¿Por qué no funciona esto?

¡Gracias por tu ayuda!

EDITAR

Parece que hay un malentendido en lo que estoy tratando de hacer aquí, así que necesito expandir un poco el código para dar una mejor idea.

Lo que estoy buscando es poder hacer lo siguiente:

 $(document).ready(function() { $("select optgroup").children().hide(); $("select optgroup").click(function() { $(this).children().show(); }); 

Como puede ver, interceptar un evento de clic en la opción y luego determinar el grupo no funcionará porque todas las opciones estarán ocultas. Quiero que se muestren las opciones al hacer clic en el grupo (optgroup). Dicho esto, Chrome no parece respetar un clic en el grupo e IE solo devuelve el grupo del elemento seleccionado (al hacer clic en un elemento de optgroup).

 $(document).ready(function() { $("select").change(function() { var clicked = $(this) .find('option:selected') // get selected option .parent() // get that option's optgroup .attr("label"); // get optgroup's label alert( clicked ); }); }); 

MANIFESTACIÓN

Nota

.click() es un evento incorrecto que estás usando. ver comentario

Existe una solución sofisticada que le permite escuchar eventos de clics en grupos de opciones en selección múltiple. La idea es escuchar los clics en el elemento de selección principal y calcular si el usuario ha hecho clic en el título del grupo opt.

 $('#multipleSelectId').click(function(event) { var y = event.pageY - $(this).offset().top; var row = Math.floor((y - 4) / 15); $(this).find('optgroup').each(function() { if (row == 0) { onOptgroupClick($(this)); return false; } row -= $(this).children().length + 1; }); }); 

Este enfoque se ha probado en Chromium 30, Firefox 25, IE 9.

No sé si se puede aplicar a selecciones individuales, pero con “multiple = multiple” funciona como un hechizo.

Así es como puedes resolverlo usando jQuery.

Primero asigne el evento al grupo optativo y vea si se detuvo la propagación.

 $('optgroup').on('click',function(e) { if(!e.isPropagationStopped()){ if ($(this).find('option:visible').length == $(this).children().length) { $(this).children().hide(); } else { $(this).children().show(); } } }); 

A continuación, deseamos evitar que el fragmento de código anterior se active cuando hacemos clic en una de las opciones secundarias.

 $('optgroup > option').on('click',function(e) { e.stopPropagation(); $(this).parent().trigger('change'); }); 

El evento “desencadenante” al que se llama al final de la función es garantizar que cualquier otro desencadenante asignado en el evento de cambio todavía se desencadene.

   

Así que la respuesta corta a esto parece ser que esto no es posible. No es posible realizar una selección normal con los grupos de opciones y convertirla en una lista de selección de estilo acordeón donde inicialmente, solo se muestran los elementos del grupo de opciones y al hacer clic en un elemento del grupo de opciones se amplían sus elementos secundarios (las opciones).

Parece que ningún navegador realmente admite hacer clic en un elemento de grupo en la lista de selección. Si bien hay un evento onClick, el evento actúa más como si hubiera hecho clic en el elemento seleccionado.