Bootstrap 5.3 事件在 jQuery .on 事件中不起作用

Question

这是一个很奇怪的问题。我以前从来没有遇到过这样的问题...

这是我的下拉菜单...

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

<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>

如果我将这个确切的下拉代码复制到项目测试中...

下拉菜单有效，我的其他 jQuery 也有效，但 jquery 下拉事件永远不会触发。

这是我的完整 JS 代码，它加载在页脚中......

// 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...
    $(document).on('show.bs.dropdown', "#mydropdown", function() {
        console.log('hit!');
    });


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


});

我如何在上面的演示中工作，但在我的项目中不起作用。

任何帮助都会非常感谢。

Answer 1

尝试绑定到元素而不是文档本身。它看起来是 API 的约定 - 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>