NavigateUrl not calling javascript in MenuItem

Question

I can't seem to figure why the menu item is not invoking the javascript functionality in my asp.net menu. When I click on the menu item, the menu closes and does not do anything further. A portion of my code is shown below:

  <asp:Panel runat="server" ID="MenuPanel" CssClass="MenuPanel" style="display: none">
    <asp:Menu ID="MyMenu" runat="server" CssClass="Menu" ForeColor="Black"
      BorderStyle="Double" BorderColor="Gray" BorderWidth="1px">
      <StaticMenuItemStyle BackColor="#DBDDE0" CssClass="MenuItem" />
      <StaticHoverStyle BackColor="#CCCDCE" />
      <Items>
        <asp:MenuItem Text='Item 1' Value="0" Selectable="true" NavigateUrl="javascript:alert('hello world 1')" ImageUrl="~/image1.gif"/>
        <asp:MenuItem Text='Item 2' Value="1" Selectable="true" NavigateUrl="javascript:alert('hello world 2')" ImageUrl="~/image2.gif" />
      </Items>
    </asp:Menu>
  </asp:Panel>

Update 1

I was about to dump out the browser output when further testing revealed that when I commented out the onBlur event of the element being clicked (the element that brings up the menu), the javascript worked as expected.

The code in the onBlur event hides the pop-up menu when focus is moved away from the element. The second click on the menu item itself triggered the onBlur event which hides the menu. It seems that since the menu is hidden, the javascript associated with it does not get invoked.

Answer 1

What does the output look like in the browser?

Use viewsource or firebug or IE debugger to take a look.

This would be better handled by using onclick:

onclick='alert("test");return false;'

Answer 2

I think you should try JQuery

<script language="javascript" type="text/javascript">
   $(function () {
        $(".Menu a").each(function (index) {
             $(this).click(function () {
                 alert(index);
                 return false;
             });
        });
   });
</script>