Bootstrap Tutorial - Handle dropdown menu click event








The following code shows how to handle dropdown menu click event.

Example

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script
  src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link
  href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css"
  rel="stylesheet">
<!--   ww w  .j  av  a2s .  co  m-->

<script type='text/javascript'>
$(window).load(function(){
     $(function(){
         $(".dropdown-menu").on("click", "li", function(event){
             console.log("You clicked the drop downs", event)
         })
     })
});
</script>
</head>
<body style='margin:30px'>
  <div class="btn-group pull-right">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
      Options <span class="caret"> </span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#add-user-dialog" role="button" data-toggle="modal">Add
          User</a></li>
      <li><a href="#">Delete User</a></li>
    </ul>
  </div>
</body>
</html>

Click to view the demo