0

在我的 Bootstrap 项目中，我使用了几个 JavaScript 文件。我像这样加载这些文件：

App.razor

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/jquery/jquery-3.6.0.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/popper/popper.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/bootstrap/bootstrap.min.js");
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "/js/JavaScript.js"); // This is my custom JavaScript
    }
}

但是，当我尝试使用我的任何自定义 JavaScript (JavaScript.js) 时，它不起作用。

当我尝试像这样“直接”调用它时：

<span onclick="myJSFunction();"> click me </span>

浏览器给了我错误：

Uncaught ReferenceError: myJSFunction is not defined at HTMLSpanElement.onclick ((index):1)

当我尝试像这样通过 Blazor 调用它时：

<span @onclick="myFunction"> click me </span>
@code {
    [Inject]
    IJSRuntime JSRuntime { get; set; }

    private async Task myFunction()
    {
        await JSRuntime.InvokeAsync<IJSObjectReference>("myJSFunction", "some text");
    }
}

Blazor 给了我这个错误：

Error: Could not find 'myJSFunction' ('myJSFunction' was undefined).

我知道我的 JavaScript.js 正在加载，因为我把它放在文件的末尾：

alert("I'm Loaded");

并且总是弹出警告框。

令人沮丧的是，.JS我加载的所有其他文件都正常工作。

我做错了什么？

4

0 回答 0