jQuery click event not firing on optgroup
<p>I have the following code - <a href="http://jsfiddle.net/NWDC8/1/" rel="nofollow">example on jsFiddle</a></p>

<pre><code>&lt;select&gt;
 &lt;optgroup label="Group1"&gt;
   &lt;option value="11"&gt;Option 1&lt;/option&gt;
   &lt;option value="12"&gt;Option 2&lt;/option&gt;
 &lt;/optgroup&gt;
 &lt;optgroup label="Group2"&gt;
   &lt;option value="21"&gt;Option 1&lt;/option&gt;
   &lt;option value="22"&gt;Option 2&lt;/option&gt;
 &lt;/optgroup&gt;
&lt;/select&gt;​
</code></pre>

<p>and some jquery code:</p>

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

<p>This seems pretty straight forward.  If I add <code>onclick="javascript:alert(...);"</code> that seems to work ... except that the click fires no matter what is clicked.</p>

<p>Why doesn't this work?  </p>

<p>Thanks for your help!</p>

<p><strong>EDIT</strong></p>

<p>It seems there is a misunderstanding in what I'm trying to do here so I need to expand the code a bit to give a better idea.</p>

<p>What I'm shooting for is to be able to do the following:</p>

<pre><code>$(document).ready(function() {
   $("select optgroup").children().hide();
   $("select optgroup").click(function() {
      $(this).children().show();
   });
</code></pre>

<p>As you can see, trapping a click event on the option and then determining the group won't work because the options will all be hidden.  I want the options displayed when you click the Group (optgroup).  Having said that, Chrome doesn't seem to respect a click on the group and IE only returns the group of the selected item (when you click an optgroup) item.</p>
