Bootstrap 5.3 events not working in jQuery .on event

Question

This is such an odd issue. I've never had any issues like this before...

Here is my dropdown...

$('#mydropdown').on('show.bs.dropdown', function() {
  console.log('hit 1');
});

$(document).on('show.bs.dropdown', '#mydropdown', function() {
  console.log('hit 2');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.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="mydropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

If I copy this exact dropdown code into project a test...

The dropdown works, my other jQuery works, but the jquery dropdown event never fires.

Here is my full JS code, which loads in the footer...

// load jquery
import $ from 'jquery';

// import bootstrap src js
import 'bootstrap/js/src/alert';
import 'bootstrap/js/src/base-component';
import 'bootstrap/js/src/button';
import 'bootstrap/js/src/carousel';
import 'bootstrap/js/src/collapse';
import 'bootstrap/js/src/dropdown';
import 'bootstrap/js/src/modal';
import 'bootstrap/js/src/offcanvas';
import 'bootstrap/js/src/popover';
import 'bootstrap/js/src/scrollspy';
import 'bootstrap/js/src/tab';
import 'bootstrap/js/src/toast';
import 'bootstrap/js/src/tooltip';

// on ready
$(document).ready(function() {

    // this does not work...
    $("#mydropdown").on('show.bs.dropdown', function() {
      console.log('jquery hit!');
    });

    // however if I just use the js version, this works!
    const myDropdown = document.getElementById('mydropdown')
    myDropdown.addEventListener('show.bs.dropdown', event => {
        console.log('js hit!');
    });

});

How can I work in the demo above but not work in my project.

Any help would be great thanks.

Answer 1

Try binding to the element rather than the document itself. It looks to be the API's convention - https://api.jquery.com/on/

$('#mydropdown').on('show.bs.dropdown', function() {
  console.log('hit with jQuery!');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.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="mydropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>