如何将事件逻辑链接到Bootstrap 5下拉单击？
如何将事件逻辑链接到Bootstrap 5下拉单击？
提问于 2022-01-03 02:52:53
如何将"onclick“事件附加到引导5下拉，以便根据单击下拉菜单项来执行应用程序逻辑？
当下拉列表打开和关闭时，文档解释了如何接收事件，但是似乎没有任何方法可以找到单击的菜单项。我甚至尝试将一个jQuery单击事件附加到菜单项，但这似乎被阻止了。
我的下拉列表看起来是：
<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())
});回答 3
Stack Overflow用户
回答已采纳
发布于 2022-01-03 03:19:26
- 首先，您正在监听
change元素上的<a>事件。变更事件只在表单元素(<input>s、<textarea>s和<select>s)上触发，当它们的原生value属性更改值时。链接没有本机value属性，因此不会对它们触发change。 用于jQuery的变更()文档还声明表单元素是此事件的唯一有效目标。 出于同样的原因，在一个.val()上运行jQuery的<a>总是会返回一个空字符串(我已经猜到了undefined)。仍在虚报价值)。 - 寻找一个更适合听的事件，在文档中找到这个
hide.bs.dropdown和hidden.bs.dropdown事件具有一个clickEvent属性(仅当原始事件类型为click时)，该属性包含单击事件的事件对象。
- 最后，但同样重要的是，Bootstrap下拉列表依赖于它的标记(HTML结构)。特别是，
.dropdown-toggle和.dropdown-menu都应该包装在.dropdown元素中。引导程序使用它作为下拉事件发射器。 此外，您应该将tuning-optionsid从.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事件，但当使用键盘选择下拉菜单项时(很有可能，当键盘选择下拉菜单项时，引导会触发编程的click事件)。
Stack Overflow用户
发布于 2022-07-05 21:33:04
这也可以用香草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>
Stack Overflow用户
发布于 2022-01-03 03:11:30
如果您想在data-tuning中获得值，那么您应该更改
console.log(el.val())转到
console.log(el.data('tuning'))查看JQuery的API文档以了解更多信息。https://api.jquery.com/data/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70561282
复制相关文章
相似问题
腾讯云开发者
