Event handlers for Twitter Bootstrap dropdowns

Question

I d like to use a Twitter Bootstrap dropdown button        lt div class  btn-group  gt         lt button class  btn dropdown-toggle  data-toggle  dropdown  gt Action  lt span class  caret  gt  lt  span gt  lt  button gt         lt ul class  dropdown-menu  gt           lt li gt  lt a href     gt Action lt  a gt  lt  li gt           lt li gt  lt a href     gt Another action lt  a gt  lt  li gt           lt li gt  lt a href     gt Something else here lt  a gt  lt  li gt         lt  ul gt       lt  div gt  lt  --  btn-group -- gt    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

User · Answer

I have been looking at this  On populating the drop down anchors  I have given them a class and data attributes  so when needing to do an action you can do     lt li gt  lt a class  dropDownListItem  data-name  Fred Smith  href     gt Fred lt  a gt  lt  li gt    and then in the jQuery doing something like       dropDownListItem   click function e        var name   e currentTarget      console log name getAttribute  data-name           So if you have dynamically generated list items in your dropdown and need to use the data that isn t just the text value of the item  you can use the data attributes when creating the dropdown listitem and then just give each item with the class the event  rather than referring to the id s of each item and generating a click event

User · Answer

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    lt div class  btn-group  gt     lt button class  btn dropdown-toggle  data-toggle  dropdown  gt Action  lt span class  caret  gt  lt  span gt  lt  button gt     lt ul class  dropdown-menu  gt       lt li gt  lt a href     id  action-1  gt Action lt  a gt  lt  li gt       lt li gt  lt a href     id  action-2  gt Another action lt  a gt  lt  li gt       lt li gt  lt a href     id  action-3  gt Something else here lt  a gt  lt  li gt     lt  ul gt   lt  div gt  lt  --  btn-group -- gt    and then with jQuery  jQuery   action-1   click function e     do something e preventDefault

User · Answer

Without having to change your button group at all  you can do the following  Below  I assume your dropdown button has an id of fldCategory    lt script type  text javascript  gt     document  ready function           fldCategory   parent   find  UL LI A   click function  e        var sVal   e currentTarget text          fldCategory   html sVal      lt span class  caret  gt  lt  span gt         console log sVal                lt  script gt    Now  if you set the  btn-group of this item itself to have the id of fldCategory  that s actually more efficient jQuery and runs a little faster    lt script type  text javascript  gt     document  ready function           fldCategory UL LI A   click function  e        var sVal   e currentTarget text          fldCategory BUTTON   html sVal      lt span class  caret  gt  lt  span gt         console log sVal                lt  script gt

User · Answer

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        lt span class  caret  gt  lt  span gt          div removeClass  open        e preventDefault        return false

User · Answer

In Bootstrap 3  dropdown js  provides us with the various events that are triggered   click bs dropdown show bs dropdown shown bs dropdown   etc

User · Answer

Anyone here looking for Knockout JS integration   Given the following HTML  Standard Bootstrap dropdown button     lt div class  dropdown  gt       lt button type  button  class  btn btn-default dropdown-toggle  data-toggle  dropdown  gt          Select an item                         lt span class  caret  gt  lt  span gt       lt  button gt       lt ul class  dropdown-menu  role  menu  gt           lt li gt               lt a href  javascript    data-bind  click  clickTest  gt Click 1 lt  a gt           lt  li gt           lt li gt               lt a href  javascript    data-bind  click  clickTest  gt Click 2 lt  a gt           lt  li gt           lt li gt               lt a href  javascript    data-bind  click  clickTest  gt Click 3 lt  a gt           lt  li gt       lt  ul gt   lt  div gt    Use the following JS   var viewModel   function        var self   this       self clickTest   function            alert  I ve been clicked                  For those looking to generate dropdown options based on knockout observable array  the code would look something like   var viewModel   function        var self   this       self dropdownOptions   ko observableArray             id  1  label   Click 1               id  2  label   Click 2               id  3  label   Click 3                self clickTest   function item           alert  Item with id     item id     was clicked                  lt  -- REST OF DD CODE -- gt   lt ul class  dropdown-menu  role  menu  gt       lt  -- ko foreach    data  dropdownOptions  as   option    -- gt       lt li gt           lt a href  javascript    data-bind  click   parent clickTest  text  option clickTest  gt  lt  a gt       lt  li gt       lt  --  ko -- gt   lt  ul gt   lt  -- REST OF DD CODE -- gt       Note  that the observable array item is implicitly passed into the   click function handler for use in the view model code

User · Answer

Here is a working example of how you could implement custom functions for your anchors   http   jsfiddle net CH2NZ 43   You can attach an id to your anchor    lt li gt  lt a id  alertMe  href     gt Action lt  a gt  lt  li gt    And then use jQuery s click event listener to listen for the click action and fire you function       alertMe   click function e        alert  alerted        e preventDefault      prevent the default anchor functionality

User · Answer

Here you go  options have values  label and css classes that gets reflected on parent element upon selection   x000D   x000D    document  on  click    update app status   function  e                let  div     this  parent   parent                 let  btn    div find   vBtnMain                let  btn2    div find   vBtnArrow                let cssClass     this  data  status class                let status value     this  data  status value                let status label     this  data  status label                 btn html status label                btn removeClass                 btn2 removeClass                 btn addClass  btn btn-sm vBtnMain   cssClass                btn2 addClass  btn btn-sm vBtnArrow dropdown-toggle dropdown-toggle-split   cssClass                div removeClass  show                 div find   dropdown-menu   removeClass  show                e preventDefault                return false          x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   cdn jsdelivr net npm bootstrap 4 6 0 dist js bootstrap bundle min js  gt  lt  script gt   lt link href  https   cdn jsdelivr net npm bootstrap 4 6 0 dist css bootstrap min css  rel  stylesheet   gt            lt div class  btn-group  gt      lt button type  button  class  btn btn-sm vBtnMain btn-warning  gt Awaiting Review lt  button gt      lt button type  button  class  btn btn-sm vBtnArrow btn-warning dropdown-toggle dropdown-toggle-split  data-toggle  dropdown  aria-haspopup  true  aria-expanded  false  gt          lt span class  sr-only  gt Toggle Dropdown lt  span gt      lt  button gt      lt div class  dropdown-menu dropdown-menu-right  gt        lt a class  dropdown-item update app status  data-status class  btn-warning  data-status value  1  data-status label  Awaiting Review  href     gt Awaiting Review lt  a gt        lt a class  dropdown-item update app status  data-status class  btn-info  data-status value  2  data-status label  Reviewed  href     gt Reviewed lt  a gt        lt a class  dropdown-item update app status  data-status class  btn-dark  data-status value  3  data-status label  Contacting  href     gt Contacting lt  a gt        lt a class  dropdown-item update app status  data-status class  btn-success  data-status value  4  data-status label  Hired  href     gt Hired lt  a gt        lt a class  dropdown-item update app status  data-status class  btn-danger  data-status value  5  data-status label  Rejected  href     gt Rejected lt  a gt      lt  div gt      lt  div gt  x000D   x000D   x000D

[javascript] Event handlers for Twitter Bootstrap dropdowns?

Examples related to javascript

Examples related to twitter-bootstrap