从文件 blazor.server.js 执行 Blazor.Run 后，某些 JQuery 函数不起作用答案

【问题标题】：Some JQuery function not working after executing Blazor.Run from file blazor.server.js从文件 blazor.server.js 执行 Blazor.Run 后，某些 JQuery 函数不起作用
【发布时间】：2022-03-29 21:53:36
【问题描述】：

我创建了 Blazor 服务器应用程序 (.net 5.0)。将其添加到 startup.cs services.AddServerSideBlazor()。然后集成Bootstrap模板，冒险的试炼就开始了。。在 _Host.chtml 文件的部分中，我添加了 <script src="assets/js/sb-admin-2.js"></script>，其中包含以下定义

$("#sidebarToggle, #sidebarToggleTop").on('click', function (e) {
  $("body").toggleClass("sidebar-toggled");
  $(".sidebar").toggleClass("toggled");
  if ($(".sidebar").hasClass("toggled")) {
    $('.sidebar .collapse').collapse('hide');
  };
});

它与标记的一部分相关联

  <!-- Sidebar Toggler (Sidebar) -->
  <div class="text-center d-none d-md-inline">
    <button class="rounded-circle border-0" id="sidebarToggle"></button>
  </div>

在同一个地方，在 _Host.chtml 文件中，我指定的最后一个指令

<script src="_framework/blazor.server.js" autostart="false"></script>
<script>
    document.addEventListener("DOMContentLoaded",
      function () {
        Blazor.start({
          logLevel: 1, // LogLevel.Debug
          configureSignalR: builder => builder.configureLogging("debug") // LogLevel.Debug
        });
      });
  </script>

现在谈谈这个问题。 有了这个配置，.js文件中定义的jQuery代码就不会被click事件执行了。

通过实验，我发现如果不执行 Blazor.Start() 指令，则按下 id=sidebarToggle 的按钮并执行 .js 文件中定义的 jQuery。

when blazor.run() was not running

执行后，该处理程序不存在

【问题讨论】：

看起来我遇到了同样的问题，具有讽刺意味的是，侧边栏也是如此。你有没有解决过这个问题？

标签： javascript c# jquery .net-core blazor-server-side

【解决方案1】：

遇到同样的问题后，我想出了一个简单的解决方案。我将所有 DOM-Ready 函数包装在一个包装器 init 函数中，然后在页面渲染后调用它。

JavaScript (Layout.cshtml)

function initUi() {
    (function ($) { /** sidebar event logic here **/ })(window.jquery);
}

Blazor (MainLayout.razor)

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initUi");
        }
    }
}

【讨论】：