Bootstrap 模态确认 - 删除操作无效

Question

我正在尝试创建一个简单的 ASP.Net 核心 Razor 页面应用程序来执行一些数据库操作，例如添加、编辑和删除项目。在这种情况下，记录是 'applications'。我创建了一个 Index.cshtml 来填充加载局部视图 (_ViewAllPartial.cshtml)。

@page
@model MasterDataManagement.Web.Pages.Application.IndexModel
@{
    ViewData["Title"] = "Applications";
}

<h1>Overview Applications:</h1>

<div class="card">
    <div class="col-sm-12" style="padding:20px">
        <a onclick="jQueryModalGet('?handler=CreateOrEdit','Create Application')" class="btn btn-outline-success">
            New...
        </a>
    </div>
    <div id="viewAll" class="card-body table-responsive"></div>
</div>


@section Scripts
{
    <script>
        $(document).ready(function () {
            $('#viewAll').load('?handler=ViewAllPartial');
        });
        $(function () {
            $('#reload').on('click', function () {
                $('#viewAll').load('?handler=ViewAllPartial');
            });
        });
    </script>
}

在部分视图中，项目从数据库加载并显示在列表中：

@using MasterDataManagement.Models
@model IEnumerable<Application>

<div class="table">
    <table class="table table-hover" id="applicationTable">
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Description</th>
                <th scope="col">Owner</th>
                <th scope="col">Last changed</th>
                <th scope="auto"></th>
            </tr>
        </thead>
        <tbody>

            @foreach (var table in Model)
            {
                <tr>
                    <th scope="row">@table.ID</th>
                    <td>@table.Description</td>
                    <td>@table.Owner</td>
                    <td>@table.Changed</td>
                    <td>
                        <a onclick="jQueryModalGet('?handler=CreateOrEdit&id=@table.ID','Edit Application')" class="btn btn-info text-white"> Edit</a>
                        <a id="deleteCustomerModal"
                           data-toggle="modal"
                           data-target="#modal-delete"
                           data-id="@table.ID"
                           class="btn btn-danger">
                            Delete
                        </a>
                    </td>

                </tr>

            }
        </tbody>
    </table>
    <hr />

    <script>
        $(document).ready(function () {
            $("#applicationTable").DataTable();

        });
    </script>

    <form asp-page-handler="delete" method="post" role="form" id="myForm">
        <div class="modal" id="modal-delete" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg" role="document">
                <div class="model-content">
                    <div class="modal-header">
                        <h4 style="position:center" class="modal-title">Delete Confirmation</h4>
                        <button type="button" class="close" data-dismiss="modal" value="delete" aria-hidden="true">X</button>
                    </div>
                    <div class="modal-body">
                        Are you sure you want to delete this application ?
                    </div>
                    <div class="modal-footer">
                        <button 
                                data-dismiss="modal" 
                                type="button" 
                                class="btn btn-primary">
                            No
                        </button>

                        <button 
                                type="submit" 
                                class="btn btn-danger" 
                                id="modalDeleteButtonX">
                            Yes
                        </button>


                    </div>
                </div>
            </div>
        </div>
    </form>

    <script type="text/javascript">
        $(function () {
            console.log("Document Ready starting....");

            $(document).on("click", "#modalDeleteButtonX", function(event){
                console.log("Click should go here.");
            });
          
            $('#modal-delete').on('show.bs.modal', function (event) {
                var button = $(event.relatedTarget);        // Button that triggered the modal
                var id = button.data("id");                 // Get id of the button
                var modal = $(this);
                console.log("related id = " + id);
            });


            console.log("Document Ready finished....");
        });

    </script>
</div>

当我单击“删除”按钮时，模式出现。但是当我在模式对话框上按否时，浏览器的控制台日志中没有显示任何内容。它应该记录消息 'Click should go here'，但我看到的唯一行是 'Document Ready starting' 和 'Document Ready Finished'，因此脚本似乎已加载。还是不行。

我做错了什么，我尝试了在 SO and/or Google 上找到的几种技术......

Answer 1

$(document).on("click"的用法是正确的。但是，经过测试，你目前遇到的问题都是受modal-dialog modal-lg的class影响的。

我给出的替代方案是将 <div class="modal-footer"> 移除到外部 div。它对我有用。

Bootstrap 模态确认 - 删除操作无效

Bootstrap Modal Confirmation - Delete action not working

modal-dialog

razor

asp.net-core