Am trying to alert data when Bootstrap5 Dropdown menu is closed but cannot get it to work. Below is what i have tried
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link 1</a></li>
<li><a class="dropdown-item" href="#">Link 2</a></li>
<li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>
</div>
$('.dropdown-menu').on("hide.bs.dropdown", function () {
alert('Dropdown Menu is closed');
});
It is not working because you are trying to run the function on ul elements, where as you should be running the eventlistenner on button element. I would suggest you to use id on that particular dropdown element.
$('.dropdown-toggle').on("hide.bs.dropdown", function () {
alert('Dropdown Menu is closed');
});
Here is the working example for your code. I have just added the id to the button element.