添加jQuery显示加载图形后，导航项点击无法跳转页面问题排查

需求：点击导航项时，需先显示图形，再跳转到指定页面。
未添加jQuery代码前，@Html.IsSelected可正常路由至指定页面；添加用于点击<li>时显示图形的代码后，图形正常显示，但页面始终无法跳转。

提供的代码 #

HTML代码 #

<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>
  <!-- 注：原代码存在标签未闭合、重复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>
 </li>
</ul>

添加的jQuery代码 #

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

问题根源 #

e.preventDefault()会强制阻止a标签的默认跳转行为，导致点击后仅执行了显示图形的$.graphic("show")，原本的页面跳转逻辑被完全拦截，自然无法跳转。

解决方案 #

需要在图形显示完成后，手动触发页面跳转，分两种场景处理：

1. 如果$.graphic("show")是同步执行（图形即时显示完成），直接在代码末尾添加跳转逻辑：

$(document).ready(function () {
  $('ul.nav li a').click(function (e) {
    e.preventDefault(); // 先阻止默认跳转，确保图形优先显示
    $.graphic("show");
    // 获取当前a标签的跳转地址，手动触发跳转
    window.location.href = $(this).attr('href');
  });
});

2. 如果$.graphic("show")是异步执行（比如带动画效果，需等待动画结束），要在它的回调函数内执行跳转：

$(document).ready(function () {
  $('ul.nav li a').click(function (e) {
    e.preventDefault();
    const targetUrl = $(this).attr('href');
    // 假设$.graphic支持传入回调参数，在图形显示完成后触发跳转
    $.graphic("show", function() {
      window.location.href = targetUrl;
    });
  });
});

另外，原HTML代码存在两处小问题，建议修正：

• 所有<a>标签未正确闭合（原代码结尾为@Localizer["Home"]>，缺失</a>）
• 每个<li>内重复了无意义的<a>Home</a>标签，会干扰点击逻辑和页面结构

内容的提问来源于stack exchange，提问作者Mute Jewel