jQuery class selector not working after .NET 5 upgrade

I am working on a .NET5 upgrade and while upgrading the code I found that my jQuery selector for classes are not working. It is a MVC project with razor pages.

In my view I have my script at the top and I call the menus items with anchor tags:

<script src="~/menu.js" type="text/javascript"></script>

<a href="#" class="menu-pop create_new_project" data-position="right" data-content="New Project" id="new-project">
   <i class="fa fa-edit"></i>
   <span>New Project</span>
</a>

then in my menu.js it is called like this:

$('.create_new_project').on('click', function (e) { ...do stuff});

Update
Just found that if I redirect, to another page, it triggers. I can confirm that the scripts is present when you view the menu. There are also no errors in the developer console. I am really not sure what I am doing wrong.

I tried to use the id instead of the class and adding selectors:

$('#new-project').on('click', function (e) { ...do stuff});
$('#new-project').on('click', 'a', function (e) { ...do stuff});

The issue still persisted.

It is loaded in the DOM

>Solution :

Try instead this.
$('body').on('click', 'a.myclass', function() { // do something });

here any (including dynamic) element will be triggered.

this link might be help full. => How do I attach events to dynamic HTML elements with jQuery?