События asp.net core .click () не работают в частичном представлении

В частичном представлении, когда щелкнул элемент html, я вызываю события jquery .click (), но они не запускаются. Но когда я помещаю тот же код в основное представление, они работают. Пожалуйста, помогите мне

следующие события.

$('.page-change').click(function (e) {
            alert("Hello page");
        });

        $('.toggle-sort').click(function (e) {
            alert("Hello");
        });

Ниже приведены шаги, которые я сделал:

Вызывается частичным просмотром со страницы обычного просмотра. Когда я нажимаю на заголовок EmployeeName, должно запускаться связанное с ним событие .click (), которое не работает.

Если я помещаю код частичного представления в index.cshtml, тогда события .click () работают.

Контроллер: HomeController, который передавал данные модели представления в индекс cshtml

      public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            var res = new List<EmployeeViewModel>() { 
                new EmployeeViewModel() { EmployeeDepartment = "Development", EmployeeName = "Sarath" },
            new EmployeeViewModel (){ EmployeeDepartment="Sales",EmployeeName="Stephen"},
            new EmployeeViewModel (){ EmployeeDepartment="Human Resource",EmployeeName="Krishna"},
            new EmployeeViewModel (){ EmployeeDepartment="Development",EmployeeName="Naresh"}};
            return View(res);
        }
}

Просмотр: Index.cshtml

@model IEnumerable<EmployeeViewModel>

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-center">
    <h1 class="display-4">Employees Data</h1>

    <div class="row">
        <div class="col my-3">
            <partial name="_EmployeesDataPartial" model="Model" />
        </div>
    </div>

</div>

Частичное представление _EmployeesDataPartial.cshtml

    @model IEnumerable<RandDpartialView.Models.EmployeeViewModel>


<table class="table">
    <thead>
        <tr>
            <th class="th--sortable toggle-sort" style="cursor:pointer">
                @Html.DisplayNameFor(model => model.EmployeeName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EmployeeDepartment)
            </th>            
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.EmployeeName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.EmployeeDepartment)
                </td>               
            </tr>
        }
    </tbody>
</table>
<div>
    <ul class="pagination" style="cursor:pointer">
        <li class="pagination-item">
            <a class="pagination-link page-change" data-page="1">
                <span class="icon fa fa-fw fas fa-angle-double-left"></span><span class="text">&nbsp;First</span>
            </a>
        </li>
    </ul>
</div>

@section Scripts{
    <script type="text/javascript">

        $(function () {

            $('.page-change').click(function (e) {
                alert("Hello page");
            });

            $('.toggle-sort').click(function (e) {
                alert("Hello");
            });
        });
    </script>
}