jQuery 单击事件未在 optgroup 上触发

我有以下代码 -jsFiddle 上的示例

<select>
 <optgroup label="Group1">
   <option value="11">Option 1</option>
   <option value="12">Option 2</option>
 </optgroup>
 <optgroup label="Group2">
   <option value="21">Option 1</option>
   <option value="22">Option 2</option>
 </optgroup>
</select>​

和一些 jquery 代码：

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

这看起来很简单。如果我添加onclick="javascript:alert(...);"这似乎有效......除了无论点击什么都会触发点击。

为什么这不起作用？

感谢您的帮助！

EDIT

似乎我在这里尝试做的事情存在误解，因此我需要稍微扩展代码以给出更好的想法。

我的目标是能够做到以下几点：

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

正如您所看到的，捕获选项上的单击事件然后确定组将不起作用，因为选项将全部隐藏。我希望当您单击组 (optgroup) 时显示选项。话虽如此，Chrome 似乎并不尊重对组的点击，而 IE 只返回所选项目的组（当您点击 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 );
    });
});

DEMO

Note

.click()您使用的是错误的事件。看comment