jQuery点击事件未在optgroup上触发
我有以下代码 – jsFiddle上的示例
Option 1 Option 2 Option 1 Option 2 和一些jquery代码：
$(document).ready(function() { $("select optgroup").click(function() { alert("Clicked " + $(this).attr("label")); });
这看起来非常简单。 如果我添加onclick="javascript:alert(...);" 这看起来很有效……除了无论点击什么点击都会点击。
为什么这不起作用？
谢谢你的帮助！
编辑
似乎我在这里尝试做的事情存在误解，所以我需要扩展代码以提供更好的想法。
我正在拍摄的是能够做到以下几点：
$(document).ready(function() { $("select optgroup").children().hide(); $("select optgroup").click(function() { $(this).children().show(); });
如您所见，在选项上捕获click事件然后确定该组将无法工作，因为所有选项都将被隐藏。 我想要单击组（optgroup）时显示的选项。 话虽如此，Chrome似乎并不尊重组中的点击，IE只返回所选项目的组（当您单击选项组时）。
$(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 ); }); });
DEMO
注意
.click()是你正在使用的错误事件。 看评论
有一个复杂的解决方案，允许您在多个选择中侦听optgroup上的点击事件。 这个想法是在父选择项上单击监听，并计算用户是否单击了optgroup标题。
$('#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; }); });
这种方法已经在Chromium 30，Firefox 25，IE 9中进行了测试。
我不知道它是否可以应用于单个选择，但是使用“multiple = multiple”它就像魅力一样。
以下是使用jQuery解决问题的方法。
首先将事件分配给optgroup，然后查看传播是否已停止。
$('optgroup').on('click',function(e) { if(!e.isPropagationStopped()){ if ($(this).find('option:visible').length == $(this).children().length) { $(this).children().hide(); } else { $(this).children().show(); } } });
接下来，我们希望在单击其中一个子选项时阻止上一段代码触发。
$('optgroup > option').on('click',function(e) { e.stopPropagation(); $(this).parent().trigger('change'); });
在函数结束时调用的“触发器”事件是为了确保仍然触发change事件上的任何其他已分配触发器。
因此，对此的简短回答似乎是这是不可能的。 无法使用optionGroups进行正常选择并将其转换为手风琴风格的选择列表，其中最初只显示选项组项目，单击选项组项目会扩展其子项（选项）。
似乎没有浏览器真正支持单击选择列表中的组项。 虽然有一个onClick事件，但事件的行为更像是您单击了所选项目。