Click event on child li elements

Question

On click of the navigation item I should show a graphic before the page redirects.

Before adding the jQuery code below, the @Html.IsSelected routes to the specified page. Now as I added code to show the graphic, the graphic shows up but the page never redirects to the specified page.

What am I doing wrong?

<ul>
 <li class="@Html.IsSelected(area: "Home", controller: "Home",  action: "Index")">
  <a asp-area="Home" asp-controller="Home" asp-action="Index" navigation="true">@Localizer["Home"]>
  <a>Home</a>
 </li>
 <li class="@Html.IsSelected(area: "About", controller: "About",  action: "Index")">
  <a asp-area="About" asp-controller="About" asp-action="Index" navigation="true">@Localizer["About"]>
  <a>About</a>
 </li>
</ul>

I added jQuery to show graphic on click of li

$(document).ready(function () {
  $('ul.nav li a').click(function (e) {
    e.preventDefault();
    $.graphic("show");
  });
});

Answer 1

The page doesn't redirect because you called preventDefault() to stop the page from redirecting. I presume you did this to prevent the DOM being immediately unloaded so the graphic is not shown.

To work around this you can prevent the standard page redirect, then perform it manually after a short delay. This will allow the graphic time to be displayed, although note that the action of the new page being loaded will hide the image again.

jQuery($ => {
  $('ul.nav li a').on('click', e => {
    e.preventDefault();
    $.graphic("show");
    setTimeout(() => window.location.assign(e.target.href), 500);
  });
});