Bootstrap 4 Pills Nav with Dropdown Menus - 捕捉点击

Question

我可以创建 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

Answer 1

为了捕获单击的菜单项的 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>

Bootstrap 4 Pills Nav with Dropdown Menus - 捕捉点击

Bootstrap 4 Pills Nav with Dropdown Menus - Capture click

bootstrap-4

nav-pills