Bootstrap 4 Pills Nav with Dropdown Menus - 捕捉点击
Bootstrap 4 Pills Nav with Dropdown Menus - Capture click
我可以创建 Bootstrap4 Pills Nav,没问题。我想要做的是捕获被点击的下拉菜单项的点击
媒体电话
打开
逾期
完全的
等候接听
我已经尝试了至少 3 种不同的函数来捕获单击的菜单项的 href。只有一个对点击有反应,但它对菜单点击有反应,而不是对菜单项有反应
$('a[data-toggle="dropdown"]').on('click', 'li', function(event) {
// $(".dropdown a").on("show.bs.dropdown", function (event) {
var x = $(this).text();
alert(x);
});
$('a[data-toggle="dropdown"]').on("show.bs.dropdown", function(e) {
Alert("1");
});
$(".dropdown").on("show.bs.dropdown", function(e) {
var linkText = $(e.relatedTarget).text(); // Get the link text
alert("2");
});
感谢任何帮助捕获所单击菜单项的 href 的帮助。
Fiddle here
为了捕获单击的菜单项的 href 属性,您可以在 dom 准备就绪后,将单击事件处理程序附加到:
a.dropdown-item
$('a.dropdown-item').on('click', function(event) {
var x = $(this).attr('href');
console.log(x);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<ul class="nav nav-pills dropdown-menu-left">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MediaCalls
</a>
<div class="dropdown-menu" aria-labelledby="MediaCalls">
<a class="dropdown-item" href="#mediacallsOpen">Open</a>
<a class="dropdown-item" href="#mediacallsOverDue">OverDue</a>
<a class="dropdown-item" href="#mediacallsComplete">Complete</a>
<a class="dropdown-item" href="#mediacallsOnHold">OnHold</a>
</div>
</li>
</ul>
</div>
我可以创建 Bootstrap4 Pills Nav,没问题。我想要做的是捕获被点击的下拉菜单项的点击
媒体电话 打开 逾期 完全的 等候接听我已经尝试了至少 3 种不同的函数来捕获单击的菜单项的 href。只有一个对点击有反应,但它对菜单点击有反应,而不是对菜单项有反应
$('a[data-toggle="dropdown"]').on('click', 'li', function(event) {
// $(".dropdown a").on("show.bs.dropdown", function (event) {
var x = $(this).text();
alert(x);
});
$('a[data-toggle="dropdown"]').on("show.bs.dropdown", function(e) {
Alert("1");
});
$(".dropdown").on("show.bs.dropdown", function(e) {
var linkText = $(e.relatedTarget).text(); // Get the link text
alert("2");
});
感谢任何帮助捕获所单击菜单项的 href 的帮助。
Fiddle here
为了捕获单击的菜单项的 href 属性,您可以在 dom 准备就绪后,将单击事件处理程序附加到:
a.dropdown-item
$('a.dropdown-item').on('click', function(event) {
var x = $(this).attr('href');
console.log(x);
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container">
<ul class="nav nav-pills dropdown-menu-left">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
MediaCalls
</a>
<div class="dropdown-menu" aria-labelledby="MediaCalls">
<a class="dropdown-item" href="#mediacallsOpen">Open</a>
<a class="dropdown-item" href="#mediacallsOverDue">OverDue</a>
<a class="dropdown-item" href="#mediacallsComplete">Complete</a>
<a class="dropdown-item" href="#mediacallsOnHold">OnHold</a>
</div>
</li>
</ul>
</div>