jQuery 似乎只在 Layout.cshtml 中工作

Question

I am currently working on the basics of a .NET C# Razor page application running the following:

• Razor pages
• .NET 5/C#
• jQuery v3.5.1
• Bootstrap v4.3.1

My current issue is that jQuery (and plain JS) are only working in the Layout.cshtml file, I have tried the following:

1. Script tags in the head of _layout.cshtml
2. Script tags at the bottom of the body of _layout.cshtml
3. Wrapping the jQuery in @section scripts{}

At this stage I am fairly sure it is just a case of, it needs to be setup in a very particular way in .NET5, but I really have no more clues

Bottom of _Layout.cshtml

    </header>
    <div class="container-fluid">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/js/site.js" asp-append-version="true"></script>

    @RenderSection("Head", required: false);
    @RenderSection("Scripts", required: false);

</body>
</html>

Bottom of the index.cshtml file

@section scripts {
    <script>
        $(document).ready(function () {
            $(".btn-reply").click(function (event) {
                alert("it works");
            });
        });
    </script>
}

Answer 1

令人沮丧的是，结果证明这根本与 JS 无关，实际上这归结于主 div，其中行类的 z-index 为 -1，不知道这是怎么回事，我不记得了已经设置了这个，但如果我这样做了，我会向所有花时间阅读本文的人道歉。