Search code examples
javascriptjqueryjquery-uieventsjquery-ui-menu

JQueryUI menu select event not firing

According to the documentation in http://docs.jquery.com/UI/Menu#event-select the following should fire an event when selecting (clicking?) an item, but it doesn't do anything. Am I missing anything?

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

<link href="http://view.jqueryui.com/menu/themes/base/jquery.ui.menu.css" rel="stylesheet" type="text/css"/>
<script src="http://view.jqueryui.com/menu/ui/jquery.ui.menu.js"></script>

  <script>
  $(document).ready(function() {
    $("ul").menu({
      select: function(event, ui){
        alert('selected');
      }
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">
  <ul>
  <li><a href="#">Aberdeen</a></li>
  <li><a href="#">Ada</a></li>
  <li><a href="#">Adamsville</a></li>
  <li><a href="#">Addyston</a></li>
  <li><a href="#">Adelphi</a></li>
</ul>
</body>
</html>
Solution

  • try to change select to selected 

         $("ul").menu({
         selected : function(){
            alert("Selected");
         }
     });

    EDIT: The current version of jquery ui uses 'select' not 'selected' e.g.

         $("ul").menu({
         select : function(){
            alert("Selected");
         }
     });