Event handlers for Twitter Bootstrap dropdowns?

Question

I'd like to use a Twitter Bootstrap dropdown button:

    <div class="btn-group">       <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>       <ul class="dropdown-menu">         <li><a href="#">Action</a></li>         <li><a href="#">Another action</a></li>         <li><a href="#">Something else here</a></li>       </ul>     </div><!-- /btn-group --> 

When the user changes the value of the button to 'Another action', instead of simply navigating to #, I'd actually like to handle the action in a custom way.

But I can't see any event handlers in the dropdown plugin for doing this.

Is it actually possible to use Bootstrap dropdown buttons to handle user actions? I'm starting to wonder if they're only intended for navigation - it's confusing that the example gives a list of actions.

Answer 1

Twitter bootstrap is meant to give a baseline functionality, and provides only basic javascript plugins that do something on screen. Any additional content or functionality, you'll have to do yourself.

<div class="btn-group">   <button class="btn dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>   <ul class="dropdown-menu">     <li><a href="#" id="action-1">Action</a></li>     <li><a href="#" id="action-2">Another action</a></li>     <li><a href="#" id="action-3">Something else here</a></li>   </ul> </div><!-- /btn-group --> 

and then with jQuery

jQuery("#action-1").click(function(e){ //do something e.preventDefault(); }); 

Answer 2

Try this:

$('div.btn-group ul.dropdown-menu li a').click(function (e) {     var $div = $(this).parent().parent().parent();      var $btn = $div.find('button');     $btn.html($(this).text() + ' <span class="caret"></span>');     $div.removeClass('open');     e.preventDefault();     return false; });