如何将事件逻辑链接到 Bootstrap 5 下拉点击？答案

【问题标题】：How to link event logic to Bootstrap 5 dropdown clicks?如何将事件逻辑链接到 Bootstrap 5 下拉点击？
【发布时间】：2022-01-03 02:52:53
【问题描述】：

如何将“onclick”事件附加到Bootstrap 5 dropdown，以便根据单击的下拉菜单项执行应用程序逻辑？

文档解释了如何在下拉菜单打开和关闭时接收事件，但似乎没有任何方法可以找到单击的菜单项。我什至尝试将 jQuery click 事件附加到菜单项，但这似乎被阻止了。

我的下拉菜单如下所示：

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

我的 Javascript 看起来像：

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-5

【解决方案1】：

首先，您正在侦听<a> 元素上的change 事件。 Change events 仅在表单元素（<input>s、<textarea>s 和 <select>s）上触发，当它们的原生 value 属性更改值时。链接没有原生的value 属性，因此永远不会触发change。
change() 的 jQuery 文档还声明表单元素是此事件的唯一有效目标。
出于同样的原因，在 <a> 上运行 jQuery 的 .val() 将始终返回一个空字符串（我会猜到 undefined。仍然是错误的值）。
正在寻找更适合收听的事件，在docs找到了这个：

hide.bs.dropdown 和 hidden.bs.dropdown 事件有一个 clickEvent 属性（仅当原始事件类型为 click 时）包含点击事件的事件对象。

最后但同样重要的是，Bootstrap 下拉菜单依赖于它的标记（HTML 结构）。特别是，.dropdown-toggle 和 .dropdown-menu 都应该包含在 .dropdown 元素中。 Bootstrap 将其用作下拉事件发射器。
此外，您应该将 tuning-options id 从 .dropdown-menu 移动到包装器。

这段代码将在什么时候起作用：

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

工作示例：

$('#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/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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>

附加说明：虽然规范表明此代码仅适用于 click 事件，但它也适用于使用键盘选择下拉菜单项时（很可能 Bootstrap 会触发程序化 @987654349 @通过键盘选择下拉菜单项时的事件）。

【讨论】：

【解决方案2】：

如果您尝试获取 data-tuning 中的值，那么您应该更改

console.log(el.val())

进入

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

查看 JQuery 的 API 文档以了解更多信息。 https://api.jquery.com/data/

【讨论】：