Can anyone explain why the following jquery only fires the 2nd toggle event and how to fix it? Specifically, every time I click the nested < a > element it brings up the alert "2nd click".

I tested the selector to make sure it was selecting the element properly and it does, or at least it inserted a class without any problems.

The selector is selecting the very last node in the unordered list that has an anchor tag.

$("#nav li:not(:has(li)) a").toggle(function() { //1st click
              alert("1st Click");
        }, function() { //2nd click
            alert("2nd Click");
        });

Nested HTML structure that fails:

<ul id="nav">
    <li>
      <span>stuff</span>
      <a href="#">Cat 1</a>
        <ul>
           <li>
               <span>stuff</span>
               <a href="#">Subcat1</a>
                 <ul>
                    <li>
                       <span>Stuff</span>
                       <a href="#">Subcat Details</a>
                    </li>
                 </ul>
           </li>
        </ul>
    </li>
</ul>

However, this works right and fires both click events:

<ul id="nav">
    <li>
      <span>stuff</span>
      <a href="#">Cat 1</a>
    </li>
</ul>