带有下拉菜单的 Bootstrap 4 Pills Nav - 捕获点击答案

【问题标题】：Bootstrap 4 Pills Nav with Dropdown Menus - Capture click带有下拉菜单的 Bootstrap 4 Pills Nav - 捕获点击
【发布时间】：2020-08-17 20:35:03
【问题描述】：

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

小提琴here

【问题讨论】：

标签： bootstrap-4 nav-pills

【解决方案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>

【讨论】：