How do you attach an "onclick" event to a Bootstrap 5 dropdown so you can perform application logic according to which dropdown menu item was clicked?

The docs explain how to receive events when the dropdown is open and closed, but there doesn't appear to be any way to find the clicked menu item. I even tried attaching a jQuery click event to the menu items, but that appears to be blocked.

My dropdown looks like:

<div >
  <button  type="button" id="tuningSelectButton" data-bs-toggle="dropdown" aria-expanded="false">
    Select Tuning
  </button>
  <ul id="tuning-options"  aria-labelledby="tuningSelectButton">
    <li><a  href="#" data-tuning="value1">1</a></li>
    <li><a  href="#" data-tuning="value2">2</a></li>
    <li><a  href="#" data-tuning="value3">3</a></li>
  </ul>
</div>

and my Javascript looks like:

$('#tuning-options li a').change(function(){
    var el = $(this);
    console.log(el.val())
});

CodePudding user response：

If you're trying to get the value in data-tuning then you should change

console.log(el.val())

into

console.log(el.data('tuning'))

Check out JQuery's API Documentation to learn more. https://api.jquery.com/data/

CodePudding user response：

Maybe something like this:

$('#tuning-options').on('click', (e) => {
  const data = e.target.dataset.tuning; 
  if(!data) return;
  console.log(data);
});

CodePudding user response：

1. From docs:

hide.bs.dropdown and hidden.bs.dropdown events have a clickEvent property (only when the original Event type is click) that contains an Event Object for the click event.

2. The Bootstrap dropdown relies on its markup (HTML structure). In particular, both .dropdown-toggle and .dropdown-menu have to be wrapped into a .dropdown element. Bootstrap uses this wrapper as dropdown events emitter.
   Additionally, you should move the tuning-options id from .dropdown-menu to the .dropdown wrapper.

At which point this should work:

$('#tuning-options').on('hide.bs.dropdown', ({ clickEvent }) => {
  if (clickEvent?.target) {
    console.log($(clickEvent.target).data('tuning'))
  }
})

Working example:

$('#tuning-options').on('hide.bs.dropdown', ({ clickEvent }) => {
  if (clickEvent?.target) {
    console.log($(clickEvent.target).data('tuning'))
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div  id="tuning-options">
  <button  type="button" id="dmb1" data-bs-toggle="dropdown" aria-expanded="false">
    Select tuning
  </button>
  <ul  aria-labelledby="dmb1">
    <li><a  data-tuning="value1" href="#">Tuning 1</a></li>
    <li><a  data-tuning="value2" href="#">Tuning 2</a></li>
    <li><a  data-tuning="value3" href="#">Tuning 3</a></li>
  </ul>
</div>