I have a bootstrap dropdown my problem is that the click event will not trigger. Why is the click event won't trigger? and is there a way to fix this?
<div class="dropdown d-inline-block">
<button type="button" class="btn header-item noti-icon waves-effect" id="page-header-notifications-dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="bx bx-bell"></i>
</button>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-end p-0" aria-labelledby="page-header-notifications-dropdown">
<div class="p-3">
<div class="row align-items-center">
<div class="col">
<h6 class="m-0" key="t-notifications"> Notifications
</div>
</div>
</div>
</div>
</div>
Here is my click event:
$(document).on('click','#page-header-notifications-dropdown',function() {
alert();
});
I think the problem here is your click event
Try this and see if it works. when i copied the code into VS code the alert popped up.
document.getElementById('page-header-notifications-dropdown').onclick = function() {
alert();
};