I want to call ajax to fetch notifications in a bootstrap dropdown on clicking the bell (icon). In the code below, it works only when I click on the bell first on loading the page. If I click anywhere else and then click on the bell, the click event does not fire (and thus the AJAX). Why is it happening?
PS. I am using .NET Razor views and Partials.
All the notifications should load inside the class "notifications"
HTML:
<a class="nav-link" role="button" data-toggle="dropdown"><i class="fal fa-bell fa-fw"></i></a>
<div class="dropdown-menu notification-dropdown" aria-labelledby="notification-dropdown">
<div class="notification-wrapper">
<div class="notifications"></div>
</div>
</div>
JS:
$(document).on('click', 'a.nav-link', function (e) {
$.ajax({
cache: false,
url: "/Notification/NotificationList",
type: 'GET',
traditional: true,
data: {
selectedNot: checkedIds
},
contentType: 'application/json;',
success: function (response) {
if (response.success != false) {
if (response.message == 0) { //If no notifications
//append no notifications landing page
}
else {
//append notifications in HTML
}
}
},
});
});