Bootstrap：当引导下拉菜单中的按钮时，单击事件不起作用

Question

Problem问题

Event handler not called when button inside Bootstrap dropdown.当 Bootstrap 下拉菜单中的按钮时未调用事件处理程序。

What I want我想要的是

When the dropdown button with id repeat_booking_button is clicked, I want the event handler to be called.当单击带有 id repeat_booking_button的下拉按钮时，我希望调用事件处理程序。

What i've tried我试过的

I've moved the button outside of the dropdown and the event handler is called as expected 'Scenario 1' .我已将按钮移到下拉列表之外，并且事件处理程序按预期调用'Scenario 1' 。

Scenario 1 [Working]场景一【工作】

<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>

Scenario 2 [Not Working]场景 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 Javascript

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

I'm guessing having an id attribute inside the dropdown conflicts with the functionality of the dropdown?我猜下拉列表中有一个 id 属性与下拉列表的功能冲突？

[UPDATE] [更新]

In a included custom javascript file I found the following function which was contributing to the error.在包含的自定义 javascript 文件中，我发现了导致错误的以下 function。 Removed and the system works as expected.已删除，系统按预期工作。 : ：

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

I'd like to keep this included as it keeps the dropdown open when the mouse moves away from the dropdown.我想保留它，因为当鼠标离开下拉菜单时，它会使下拉菜单保持打开状态。 Is there any solution to this?有什么解决办法吗？

Answer 1

I think there's some problem with your event handler.我认为您的事件处理程序有问题。 I added "addEventListener" and it's working fine.我添加了“addEventListener”，它工作正常。 Please check my solution and feel free to ask any questions.请检查我的解决方案，并随时提出任何问题。

    <!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>

Answer 2

on-click event is working fine i just added alert you can cross check is working fine点击事件工作正常我刚刚添加了警报你可以交叉检查工作正常

 <!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>

Bootstrap：当引导下拉菜单中的按钮时，单击事件不起作用

问题描述

2 个解决方案

解决方案1
2 2020-07-01 14:18:12

解决方案2
1 2020-07-01 14:10:27

Bootstrap：当引导下拉菜单中的按钮时，单击事件不起作用

问题描述

2 个解决方案

解决方案1 2 2020-07-01 14:18:12

解决方案2 1 2020-07-01 14:10:27

解决方案1
2 2020-07-01 14:18:12

解决方案2
1 2020-07-01 14:10:27