jQuery 无法在我的 Blazor 应用程序中正常工作

Question

我有以下脚本，可以在从我的浏览器启动的简单 html 文件中正常工作：

$("*[scroll-to]").click((event) => {
    // whatever here...
});

但是，当它与 Blazor 一起使用时，单击我的按钮时它不会被触发。

我找到了一个解决方法，将第一行替换为：

$(document).delegate("*[scroll-to]", "click", function (event) {

为什么我必须这样做？为什么只有在使用 Blazor 时才会停止工作？

我还有很多其他功能不起作用，例如这个，它没有像它应该的那样添加display: none css 属性：

if (!checkoutModal)
    $("#checkoutModal").hide();

它基本上什么都不做，即使它正在被执行。

应该正确导入jQuery：

我能做什么？为什么会发生这种情况，我该如何解决？

Answer 1

您想使用 JSInterop 来初始化 Blazor 应用程序中的 jQuery 对象。定义应从 Blazor 调用以执行初始化的 JavaScript 初始化函数。这个函数通常应该只被调用一次。您应该从生命周期 OnAfterRender(Async) 方法对中调用它。这些方法有一个名为 firstRender 的布尔参数，它在您的 Balzor 应用程序第一次渲染时被评估为真。请务必记住，仅在 Blazor 应用程序呈现后才初始化 JS 对象。

这是a link 我的回答之一，详细解释了如何做到这一点

重要： 仅当您不能使用 JS 时才使用。这是 Blazor，这不是 Angular 或其他什么。尝试将 JS 小部件（例如 modals）转换为 Blazor 组件。

不要通过 JS 对象（例如 jQuery）来操作 Blazor 组件，当然也不要通过 JS 对象来改变组件的状态。它们不应干扰 Blazor 的呈现系统，也不应触及 Blazor 生成的 DOM 元素。在任何情况下，JS 对象所做的更改都将被忽略。例如，如果您要为绑定到 Blazor 中的属性的输入文本元素分配一个值，则在呈现页面时该值将被忽略。