jQuery .on("click", ".dropdown-menu li a", function () not working答案

【问题标题】：jQuery .on("click", ".dropdown-menu li a", function () not workingjQuery .on("click", ".dropdown-menu li a", function () not working
【发布时间】：2021-02-06 00:06:47
【问题描述】：

我正在尝试创建一个下拉菜单，该菜单将显示用户使用引导程序选择的任何选项，但它不起作用。我在$(document).on("click", ".dropdown-menu li a", function () { 和$(".dropdown-menu li a").on("click", function () { 中设置了断点，但它们从未到达。 HTML：

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Sorting Algorithms</title>
  <meta name="description" content="Sorting Algorithms">
  <meta name="author" content="vader-coder">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!--<link rel="stylesheet" href="css/styles.css?v=1.0">-->
    <script src="app.js"></script>

</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <button type="button" class="btn btn-primary">Show Algorithm</button>
        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                aria-haspopup="true" aria-expanded="false">
                Array Length
            </button>
            <div class="dropdown-menu" id="arrayLength" aria-labelledby="dropdownMenuButton">
                <a class="dropdown-item" href="#">20</a>
                <a class="dropdown-item" href="#">10</a>
                <a class="dropdown-item" href="#">5</a>
            </div>
        </div>
   </nav>
    <!--Div for graph-->
    <div id="graph"></div>
</body>
</html>

JavaScript 文件“app.js”

$(document).ready(function () {
    $('dropdown-toggle').dropdown();
});
$(".dropdown-menu li a").on("click", function () {
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});
$(document).on("click", ".dropdown-menu li a", function () { 
    $(".btn:first-child").text($(this).text());
    $(".btn:first-child").val($(this).text());
});
$("#arrayLength > a").on('click', function () {
    $('#dropdownMenuButton').text($(this).val());
    //$(this).parents(".btn-group").find('.selection').text($(this).text());
    //$(this).parents(".btn-group").find('.selection').val($(this).text());

});

【问题讨论】：

元素.dropdown-menu 不包含任何列表项，因此.dropdown-menu li a 不会匹配任何内容。考虑改用.dropdown-menu a？

标签： javascript html jquery bootstrap-4 drop-down-menu

【解决方案1】：

我尝试按照 evolutionxbox 在 cmets 中的建议将 .dropdown-menu li a 替换为 .dropdown-menu a，并且成功了。

【讨论】：