Bootstrap: Click event not working when button inside bootstrap dropdown

Question

Problem

Event handler not called when button inside Bootstrap dropdown.

What I want

When the dropdown button with id repeat_booking_button is clicked, I want the event handler to be called.

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

<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();
});

I'm guessing having an id attribute inside the dropdown conflicts with the functionality of the dropdown?

[UPDATE]

In a included custom javascript file I found the following function which was contributing to the error. 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?

i added the answer please go through this event handler is getting called — abhinavsinghvirsen
– abhinavsinghvirsen, Commented Jul 1, 2020 at 14:11
I agree with @abhinavxeon, the event handler is working fine. You can swap out the specified actions for an alert, and everything works. The actions you have specified are to show a class (.page_mask_allocation) and an ID (#repeat_booking_overlay) that are not part of your example. Maybe there's some issue with the CSS of those sections or their containing elements? — Josh
– Josh, Commented Jul 1, 2020 at 14:17
Your problem is e.stopPropagation(). This is preventing any further JS from being executed. I can't say why that's there since I'm not seeing the whole webpage, or if it can be safely removed, but that's the source of your other event handler not triggering. You may need to combine these functions if e.stopPropagation() cannot be removed. — Josh
– Josh, Commented Jul 1, 2020 at 18:37

Khalil · Accepted Answer · 2020-07-01 14:18:12Z

I think there's some problem with your event handler. I added "addEventListener" and it's working fine. 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>

Rory McCrossan · Accepted Answer · 2020-07-01 14:21:41Z

1

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>

edited Jul 1, 2020 at 14:21

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

answered Jul 1, 2020 at 14:10

abhinavsinghvirsen

2,10519 silver badges26 bronze badges

3 Comments

Lewis Over a year ago

Thanks for proving this, it's helped narrow down the issue. However, the handler is still not being executed.

Rory McCrossan Over a year ago

'Your code works' is not an answer. It just means there is another underlying issue in the OPs code which the answer does not address. How this has been upvoted is beyond me.

Lewis Over a year ago

An upvote indicates that a user found the answer useful. It clears at least one possibility that may contribute to the issue, does it not?

Collectives™ on Stack Overflow

Bootstrap: Click event not working when button inside bootstrap dropdown

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related