Question

Bootbox Conform未显示单击链接按钮。尝试了很多东西，最近安装了BootBox，Bootstrap和Jquery。似乎点击按钮后，对话框被创建在右上方的下方导航栏，因为鼠标图标在2点处变化，但是符合模型或对话框不显示或出现。这是我的Html代码：

<table id="customers" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th scope="col">Customers</th>
                <th scope="col">Membership Type</th>
                <th scope="col">Delete</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var customer in Model)
            {
                <tr>
                    <td scope="row">@Html.ActionLink(customer.Name,"Edit","Customers",new { customer.Id },null)</td>
                    <td scope="row">@customer.MembershipType.Name</td>
                    <td scope="row"><button data-customer-id="@customer.Id" class="btn btn-link js-delete">Delete</button>
                </tr>
            }
        </tbody>
    </table>

这是我的Java脚本代码：

@section scripts
{
    <script>
        $(document).ready(function () {
            $("#customers .js-delete").on("click", function () {
                //e.preventDefault();
                var butten = $(this);
                bootbox.alert("Are You sure You want to Delete this Customer?")
                bootbox.confirm("Are You sure You want to Delete this Customer?", function (result) {
                        
                    if (result) {
                        $.ajax({
                            url: "/api/customers/" + butten.attr("data-customer-id"),
                            method: "DELETE",
                            success: function () {
                                butten.parent("tr").remove();
                            }
                        });
                    }
                });
                //if (confirm("Are You sure You want to Delete this Csustomer?")) {
                    
                //}
            });
        });
    </script>
}

此外，如果我使用默认确认而不是bootbox确认，一切正常但点击删除按钮后记录被删除但页面不刷新。

Answer 1

我找到了解决方案。看起来Bootbox与Bootstrap 4.0及更高版本有问题。我安装了bootstrap 3.3.7。现在Bootbox工作正常。有任何建议如何使它与bootstrap 4.0和更新？

Answer 2

我设置了一个与BS4和jquery 3.3.1一起用于Bootbox 4.4.0的代码片段

为了简单起见，我删除了你的ajax调用，但是否则我没有看到问题。

$(document).ready(function() {
  $("#customers .js-delete").on("click", function() {
    bootbox.alert("Are You sure You want to Delete this Customer?");
    bootbox.confirm("Are You sure You want to Delete this Customer?", function(result) {
      if (result) {
        console.log(result);
      }
    });
  });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>


<table id="customers" class="table table-bordered table-hover">
  <thead>
    <tr>
      <th scope="col">Customers</th>
      <th scope="col">Membership Type</th>
      <th scope="col">Delete</th>
    </tr>
  </thead>
  <tbody>
    @foreach (var customer in Model) {
    <tr>
      <td scope="row">@Html.ActionLink(customer.Name,"Edit","Customers",new { customer.Id },null)</td>
      <td scope="row">@customer.MembershipType.Name</td>
      <td scope="row"><button data-customer-id="@customer.Id" class="btn btn-link js-delete">Delete</button>
    </tr>
    }
  </tbody>
</table>

Bootbox Conform不显示

2 个答案: