Bootstrap：當引導下拉菜單中的按鈕時，單擊事件不起作用

Question

問題

當 Bootstrap 下拉菜單中的按鈕時未調用事件處理程序。

我想要的是

當單擊帶有 id repeat_booking_button的下拉按鈕時，我希望調用事件處理程序。

我試過的

我已將按鈕移到下拉列表之外，並且事件處理程序按預期調用'Scenario 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 屬性與下拉列表的功能沖突？

[更新]

在包含的自定義 javascript 文件中，我發現了導致錯誤的以下 function。 已刪除，系統按預期工作。 ：

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

我想保留它，因為當鼠標離開下拉菜單時，它會使下拉菜單保持打開狀態。 有什么解決辦法嗎？

Answer 1

我認為您的事件處理程序有問題。 我添加了“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>

Answer 2

點擊事件工作正常我剛剛添加了警報你可以交叉檢查工作正常

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