Jquery Not Working Properly With My Blazor App

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... }); However

Solution 1:

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

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.

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.