bootbox 确认弹出框没有出现并且页面冻结

Question

常规的 js 确认弹出框有效，但是当我切换到引导框格式时，页面冻结。我已经通过包管理器控制台安装了最新版本的 bootbox 和 bootstrap。我查看了教程并遵循了一些确切的步骤，但碰巧遇到了同样的问题。我不确定我是否已经很好地解释了这个问题，因为我是新手。

这是我的代码。

@model List<Vidly.Models.Customer>

@{
    ViewBag.Title = "Customer";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Customer</h2>

<table id="customers" class="table table-striped">
    <thead>
        <tr>
            <th scope="col">Customers</th>
            <th scope="col">MembershipType</th>
            <th scope="col">Delete</th>

        </tr>
    </thead>
    <tbody>
        @foreach (var customer in Model)
        {

            <tr>
                <td>@Html.ActionLink(customer.Name, "Edit", "Customer", new { id = customer.Id }, null)</td>
                <td>@customer.MembershipType.MembershipTypes</td>
                <td><button data-customers-id="@customer.Id" class="btn-link js-delete">Delete</button></td>
            </tr>

        }
    </tbody>
</table>




@section scripts {



    <script>

       $(document).ready(function () {
            $("#customers .js-delete").on("click",".js-delete", function (e) {

              var button = $(this);
                bootbox.confirm("Are you sure you want to delete this customer?", function (result) {

                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + button.attr("data-customer-id"),
                            method: "DELETE",
                            success: function () {
                                button.parents("tr").remove();
                            }
                        });
                    }
                });
            });
        });



    </script>


}

Answer 1

我刚刚遇到了同样的问题。我刚刚将引导程序版本更新到版本 4：

update-Package bootstrap -Version 4.3.1

之后它就起作用了。

Answer 2

对于您当前的代码，您将无法找到按钮元素，请尝试更改选择器，例如

$("#customers").on("click",".js-delete", function (e) {
    var button = $(this);
    bootbox.confirm("Are you sure you want to delete this customer?", function (result) {
    });
});

或者，

$("#customers .js-delete").on("click",function (e) {
    var button = $(this);
    bootbox.confirm("Are you sure you want to delete this customer?", function (result) {
    });
});

要使用bootbox，你需要使用bootstrap.css而不是bootstrap-lumen.css。

试试

bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/Site.css",
            "~/Content/datatables/css/datatables.bootstrap.css"));