Question

问题

在Bootstrap下拉菜单中的按钮未调用事件处理程序时。

我想要的

单击ID为repeat_booking_button的下拉按钮时，我希望调用事件处理程序。

我尝试过的事情

我已经将按钮移到了下拉列表的外面，事件处理程序被按预期方式调用“方案1” 。

场景1 [工作中]

<div class="button_wrapper">
    <button type="button" id="repeat_booking_button">Repeat Booking</button>
    <div class="dropdown">
        <button class="btn dark_grey_button dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Options
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        </div>
    </div>
</div>

方案2 [不起作用]

<div class="button_wrapper">
    <div class="dropdown">
        <button class="btn dark_grey_button dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Options
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <button type="button" class="dropdown-item" id="repeat_booking_button">Repeat Booking</button>
        </div>
    </div>
</div>

JavaScript

$(document).on('click', '#repeat_booking_button', function() {
    $("#repeat_booking_overlay").show();
    $(".page_mask_allocation").show();
});

我猜下拉列表中有一个id属性与下拉菜单的功能冲突？

[UPDATE]

在包含的自定义javascript文件中，我发现以下导致错误的函数。已卸下，系统按预期工作。：

$('body').on("click", ".dropdown-menu", function (e) {
  $(this).parent().is(".show") && e.stopPropagation();
});

我想保留此内容，因为当鼠标从下拉菜单移开时，它将使下拉菜单保持打开状态。有什么解决办法吗？

Answer 1

点击事件运行良好，我刚刚添加了提醒，您可以进行交叉检查并正常运行

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
    </head>
    <script>
    $(document).ready(function(){
    $(document).on('click', '#repeat_booking_button', function() {
        $("#repeat_booking_overlay").show();
        $(".page_mask_allocation").show();
        alert("");
    });
    });
    </script>
    </head>
    <body>
    
    <div class="button_wrapper">
        <div class="dropdown">
            <button class="btn dark_grey_button dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Options
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <button type="button" class="dropdown-item" id="repeat_booking_button">Repeat Booking</button>
            </div>
        </div>
    </div>
    
    </body>
    </html>

Answer 2

我认为您的事件处理程序存在一些问题。我添加了“ addEventListener”，它工作正常。请检查我的解决方案，并随时提出任何问题。

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="button_wrapper">
    <div class="dropdown">
        <button class="btn dark_grey_button dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Options
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <button type="button" class="dropdown-item" id="repeat_booking_button">Repeat Booking</button>
        </div>
    </div>
</div>
<script type="text/javascript">
    var $ = function( id ) { return document.getElementById( id ); };

    $('repeat_booking_button').addEventListener('click', function() {
        console.log('test');
    });

</script>
</body>
</html>

引导程序：当引导程序下拉列表中的按钮出现时，单击事件不起作用

2 个答案: