单击时未触发 Bootstrap 5 下拉列表项上的单击事件 [重复]答案

【问题标题】：Click event on Bootstrap 5 dropdown list item not triggering when clicked [duplicate]单击时未触发 Bootstrap 5 下拉列表项上的单击事件 [重复]
【发布时间】：2021-08-12 12:56:54
【问题描述】：

我正在尝试通过 javascript 在引导 5 下拉项上添加点击事件，更准确地说是 jQuery，但是该事件不会在点击时触发，它会在页面加载时触发一次，而无需我点击它。

这是一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
    <button type="button" class="btn btn-primary">1</button>
    <button type="button" class="btn btn-primary">2</button>

    <div class="btn-group" role="group">
        <button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
            <li><a class="dropdown-item" href="#">Dropdown link</a></li>
        </ul>
    </div>
</div>
<script>
    $('.dropdown-menu li a').on('click', console.log("TEST"))
</script>
</body>
</html>

我注意到的一件奇怪的事情是，如果我在其中一个项目上添加一个 onclick 属性，那么它对于该特定元素的行为正确：

<li><a onclick="console.log('TEST')" class="dropdown-item" href="#">Dropdown link</a></li>

我用于此的引导示例可以在这里找到https://getbootstrap.com/docs/5.0/components/button-group/#nesting

我想通过 Javascript 添加点击事件而不是使用 onclick 属性，我做错了什么以及可能的解决方案是什么？

【问题讨论】：

标签： javascript html jquery bootstrap-5

【解决方案1】：

像这样更新你的<script>。

<script>
  $(document).ready(function(){
    $('.dropdown-menu li a').on('click', function(){
      console.log("TEST");
    });  
  })
</script>

带有输出和更改的屏幕截图

【讨论】：