jQuery无法与我的Blazor应用程序正常工作 [英] jQuery not working properly with my Blazor app

问题描述

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

I have the following script which works just fine in a simple html file being launched from my browser:

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

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

However, when using it with Blazor, it doesn't get triggered when clicking my button.

我找到了一种解决方法，该方法是将第一行替换为:

I found a workaround, which is replacing the first line with this instead:

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

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

Why do I have to do that? Why would it only stop working when using Blazor?

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

I also have a lot of other functions that are not working, such as this one for example, which doesn't add the display: none css attribute like it's supposed to:

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

它基本上什么也没做，即使正在执行.

It basically does nothing, even tho it's being executed.

应该正确导入jQuery:

jQuery should be properly imported:

我该怎么办?为什么会发生这种情况，我该如何解决?

What can I do? Why is this happening and how can I fix it?

推荐答案

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

You want to use JSInterop in order to initialize jQuery objects in your Blazor App. Define a JavaScript init function you should call from Blazor to perform the initialization. This function should ordinarily be called only once. You should call it from the life cycle OnAfterRender(Async) pairs of methods. These methods have a boolean parameter named firstRender, which is evaluated to true the first time your Balzor App is rendered. It is important to remember that you initialize your JS objects only after the Blazor App is rendered.

这是链接，指向我的一个回答，其中详细说明了该操作的方法

Here's a link to one of my answer explaining in detail how to do that

重要:除非另有说明，否则请仅使用JS.这是Blazor，不是Angular或其他任何东西.尝试将JS小部件(例如模式)转换为Blazor组件.

Important: Use JS only if you can't otherwise. This is Blazor, this is not Angular or whatever. Try to convert JS widgets, such as modals into Blazor components.

请勿通过JS对象(如jQuery)来操纵Blazor组件，当然也不要通过JS对象来改变组件的状态.它们不应干扰Blazor的渲染系统，也不应触及Blazor生成的DOM元素.无论如何，JS对象所做的更改都将被忽略.例如，如果要为绑定到Blazor中的属性的输入文本元素分配一个值，则在呈现页面时将忽略此值.

Do not manipulate Blazor components by JS objects, such as jQuery, and certainly do not mutate the state of components via JS objects. They shouldn't interfere with the rendering system of Blazor, and they shouldn't touch the DOM elements which Blazor has produced. In any case, changes made by JS objects will be ignored. If, as for instance, you'll assign a value to an input text element which is bound to a property in Blazor, this value will be ignored when the page is rendered.

这篇关于jQuery无法与我的Blazor应用程序正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！