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

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

$("#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"));

Answer 2

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

update-Package bootstrap -Version 4.3.1

此后它才起作用。

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

2 个答案: