0

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
                    }
                }
            },
        });
});
1infinite
  • 23
  • 3
  • Any errors on the console ? Press F12 and see it there are any errors after clicking second time ? – Always Helping Aug 14 '20 at 07:48
  • There's going to be something else (not in the question) that's causing this problem. You'll need to try and find what this is in your code - either 1) remove everything and add small parts back until it occurs or 2) keep everything and remove parts until it stops being a problem - this should help identify what's causing it. Also have a read of [mcve]. – freedomn-m Aug 14 '20 at 08:30
  • @AlwaysHelping no errors on the console. I tried putting up the situation better here: So let me put the situation better, When I click on the notification icon, it loads the notifications, yes. When I click it again, ideally, it should call the ajax again, which does not happen and I am stuck with the same notifications. Also, the click event only triggers if I click the bubble before clicking anywhere else on page load. – 1infinite Aug 17 '20 at 06:05

2 Answers2

0

Did you try this way?

$("a.nav-link").click(function () {
        //your stuff
    })

Works for me

Casper J
  • 1
  • 1
  • 2
    This is way much better => `$(document).on('click', 'a.nav-link', function (e) {})`. trust me! – Always Helping Aug 14 '20 at 07:47
  • So let me put the situation better, When I click on the notification icon, it loads the notifications, yes. When I click it again, ideally, it should call the ajax again, which does not happen and I am stuck with the same notifications. Also, the click event only triggers if I click the bubble before clicking anywhere else on page load. – 1infinite Aug 17 '20 at 06:00
0

So I got this simple solution. Instead of writing a click event in JS, I wrote a function in JS and called it onclick directly from HTML. Seems to have solved the problem completely.

1infinite
  • 23
  • 3