How to link event logic to Bootstrap 5 dropdown clicks?

Question

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 class="mb-3">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="tuningSelectButton" data-bs-toggle="dropdown" aria-expanded="false">
    Select Tuning
  </button>
  <ul id="tuning-options" class="dropdown-menu" aria-labelledby="tuningSelectButton">
    <li><a class="dropdown-item" href="#" data-tuning="value1">1</a></li>
    <li><a class="dropdown-item" href="#" data-tuning="value2">2</a></li>
    <li><a class="dropdown-item" 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())
});

Answer 1

1. First of all, you're listening for change events on <a> elements. Change events are only fired on form elements (<input>s, <textarea>s and <select>s), when their native value attribute changes value. Links do not have a native value attribute, therefore change is never fired on them.
   jQuery documentation for change() also states form elements are the only valid targets for this event.
   For the same reason, running jQuery's .val() on an <a> will always return an empty string (I would have guessed undefined. Still falsey value).
2. Looking for a more suitable event to listen to, found this in the 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.

3. Last, but not least, Bootstrap dropdown relies on its markup (HTML structure). In particular, both .dropdown-toggle and .dropdown-menu should be wrapped in a .dropdown element. Bootstrap uses it as dropdown events emitter.
   Additionally, you should move tuning-options id from .dropdown-menu to the wrapper.

At which point this code will 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 class="dropdown" id="tuning-options">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dmb1" data-bs-toggle="dropdown" aria-expanded="false">
    Select tuning
  </button>
  <ul class="dropdown-menu" aria-labelledby="dmb1">
    <li><a class="dropdown-item" data-tuning="value1" href="#">Tuning 1</a></li>
    <li><a class="dropdown-item" data-tuning="value2" href="#">Tuning 2</a></li>
    <li><a class="dropdown-item" data-tuning="value3" href="#">Tuning 3</a></li>
  </ul>
</div>

Additional note: Although the specs indicate this code should only work for click events, it also works when a dropdown menu item is selected using a keyboard (most likely Bootstrap fires a programmatic click event when a dropdown menu item is selected by keyboard).

Answer 2

This can be done with vanilla js as well

window.addEventListener('load', function () {
    const myDropdown = document.getElementById('dmb1')
    myDropdown.addEventListener('hide.bs.dropdown', event => {
        console.log(event.clickEvent.path[0].getAttribute('value'))
    })
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>


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