[英]How to link event logic to Bootstrap 5 dropdown clicks?
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?您如何将“onclick”事件附加到Bootstrap 5 下拉菜单,以便您可以根据单击的下拉菜单项执行应用程序逻辑?
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.我什至尝试将 jQuery 单击事件附加到菜单项,但这似乎被阻止了。
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:我的 Javascript 看起来像:
$('#tuning-options li a').change(function(){
var el = $(this);
console.log(el.val())
});
change
events on <a>
elements.首先,您正在监听<a>
元素上的change
事件。 Change events are only fired on form elements ( <input>
s, <textarea>
s and <select>
s), when their native value
attribute changes value. 更改事件仅在表单元素( <input>
s、 <textarea>
s 和<select>
s)上触发,当它们的原生value
属性更改值时。 Links do not have a native value
attribute, therefore change
is never fired on them.链接没有原生value
属性,因此永远不会对它们进行change
。.val()
on an <a>
will always return an empty string (I would have guessed undefined
. Still falsey value).出于同样的原因,在<a>
上运行 jQuery 的.val()
总是会返回一个空字符串(我会猜到undefined
。仍然是错误的值)。
hide.bs.dropdown
andhidden.bs.dropdown
events have aclickEvent
property (only when the original Event type isclick
) that contains an Event Object for the click event.hide.bs.dropdown
和hidden.bs.dropdown
事件有一个clickEvent
属性(仅当原始事件类型为click
时),其中包含 click 事件的事件 Object。
.dropdown-toggle
and .dropdown-menu
should be wrapped in a .dropdown
element.特别是, .dropdown-toggle
和.dropdown-menu
都应该包含在.dropdown
元素中。 Bootstrap uses it as dropdown events emitter. Bootstrap 使用它作为下拉事件发射器。tuning-options
id from .dropdown-menu
to the wrapper.此外,您应该将tuning-options
id 从.dropdown-menu
移动到包装器。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/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>
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).附加说明:虽然规范表明此代码仅适用于click
事件,但它也适用于使用键盘选择下拉菜单项时(很可能当通过键盘选择下拉菜单项时,Bootstrap 会触发编程click
事件)。
If you're trying to get the value in data-tuning
then you should change如果你想在data-tuning
中获得价值,那么你应该改变
console.log(el.val())
into进入
console.log(el.data('tuning'))
Check out JQuery's API Documentation to learn more.查看 JQuery 的 API 文档以了解更多信息。 https://api.jquery.com/data/ https://api.jquery.com/data/
Maybe something like this:也许是这样的:
$('#tuning-options').on('click', (e) => {
const data = e.target.dataset.tuning;
if(!data) return;
console.log(data);
});
This can be done with vanilla js as well这也可以用 vanilla js 来完成
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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.