Aspnetcore: Blazor Server js breaks javascript

[AhmedHemdan21]

Blazor overrides javascript implementation and hides it

I have created new Blazor Server-side project using Visual Studio 2019 Preview
Using .NET Core 3.0 Preview 7 SDK

i have added those lines at the end of body after
<script src="_framework/blazor.server.js"></script>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>

    <script src="./js/test.js"></script>

and i have created simple javascript method that runs on click on button

$(document).ready(function () {
    alert("ready!");

    $("#testJs").click(function () {
        alert("Handler for .click() called.");
    });
});

the javascript working fine only if i removed the blazor script
<script src="_framework/blazor.server.js"></script>
which means no blazor on the browser

so i'll i need is making them working together so i could implement Bootstrap javascript based templates along with blazor

[SteveSandersonMS]

Can you provide a minimal example that reproduces the problem? Given the default project template, what is the minimal set of steps needed to update it to show the problem you're describing?

[AhmedHemdan21]

All you need to do to reproduce the problem is add reference of the test.js "That includes the above scrips" file to the _Host.razor
and Add <button id="testJs"> Click me </button> at any razor component, then try to click on that button,
you'll find that alert("ready!"); works on loading, then every javascript stops working after

[AhmedHemdan21]

For more information: i have moved all the code from _host.cshtml to Razor Pages and _Layout.cshtml including the Blazor and it works fine there, but when i use fully Blazor App it breaks the Javascript

[SteveSandersonMS]

Oh, I see what you're doing.

The issue is that when you execute this:

    $("#testJs").click(function () {
        alert("Handler for .click() called.");
    });

... jQuery only attaches handlers to elements that are currently in the document. It's not adding new listeners to elements that get added later, such as when the static prerendered elements get replaced by live elements.

To avoid this problem, you should use jQuery's on method (passing a selector) instead of .click. Please see jQuery docs for more info.

[AhmedHemdan21]

if you mean by that using
$("#testJs").on("click",(function () { alert("Handler for .click() called."); }));
instead, it gives the same result, it works only after Hard Refresh "CTRL +F5" but if i refreshed after "F5" it breaks again, and everything works fine Only if i removed the
<script src="_framework/blazor.server.js"></script> line,
and what made me originally make that small test example is that i have full bootstrap template that breaks as long as i have blazor.server.js in my _Host.cshtml and again it works fine with Razor Pages

[SteveSandersonMS]

No, I mean using the version of on that takes a selector parameter.

[AhmedHemdan21]

Thanks, it worked fine, so that mean that all existing online bootstrap templates wont work fine unless they are changed to used selectors, right?

[SteveSandersonMS]

It’s the same situation as with all SPA frameworks.