jQuery 函数不运行以显示“模态”元素答案

【问题标题】：jQuery function don't run to show "Modal" elementjQuery 函数不运行以显示“模态”元素
【发布时间】：2021-06-16 14:03:32
【问题描述】：

我想在网页中放置一个按钮并在您单击它时显示一个模式。我用 jQuery 编写了 OnClick 事件函数。

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="ModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body" id="modalbody">
          
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

@section scripts{
<script src="~/Scripts/modal.js"></script>
<script>

    $("btnNewGroup").on("click",function () {
        $.get("/Admin/PageGroups/Create", function (result) {
            $("Modal").modal();
            $("ModalLabel").html("Create new group");
            $("modalbody").html(result);
        })
    });
</script>

}

在渲染部分之前有参考：

 <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
@RenderSection("scripts", required: false)

【问题讨论】：

确保 jquery 是 before 引导程序。检查您的控制台（浏览器 F12），它们可能是一条错误消息。
关于您的代码，请查看 learn.jquery.com - 您在所有选择器中都缺少 id 选择器 $("Modal") -> $("#Modal") 等
除了缺少选择器前缀之外，您还应该将代码包装在文档的 ready 方法中。
各位，谢谢你的回答我照你说的做了，问题解决了

标签： javascript jquery asp.net asp.net-mvc

【解决方案1】：

问题在于您的 jquery 选择器。您缺少 ID 选择器。请在下方查看。

$("#btnNewGroup").on("click",function () {
    $.get("/Admin/PageGroups/Create", function (result) {
        $("#Modal").modal();
        $("#ModalLabel").html("Create new group");
        $("#modalbody").html(result);
    })
});

【讨论】：