使用 Twitter 引导程序确认删除模式/对话框不起作用答案

【问题标题】：Confirm delete modal/dialog with Twitter bootstrap not working使用 Twitter 引导程序确认删除模式/对话框不起作用
【发布时间】：2017-09-10 23:16:21
【问题描述】：

我在VS2015 上的ASP.NET Core 1.1 项目中的ViewComponent 有一个带有Twitter 引导程序的确认删除模式/对话框，如下所示。但是当用户单击Delete 按钮确认删除时，它不会触发如下所示的jquery 函数。模态/对话框弹出很好，但是当我在模态/对话框中单击带有id= DeleteBtnID 的删除按钮时，我希望它会弹出“警报（'Test'）”，但这并没有发生。问题：我可能缺少什么？ Chrome 的开发者工具中没有显示任何错误。

调用 ViewComponent 的视图：

@model MyProj.Models.TestModel

some html
....
....
<div id="DeleteBtnParentID">
   @await Component.InvokeAsync("TestVC")
</div>

视图组件：

@model IEnumerable<MyProj.Models.TestModel>

<table>
    @foreach (var item in Model)
    {
        <tr>
            <td>
                <a asp-action="TestAction">@item.Title</a>
            </td>
            <td>
                <button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete</button>
                <!-- Modal -->
                <div id="myModal" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-sm">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h5 class="modal-title modal-sm">Delete Warning</h5>
                            </div>
                            <div class="modal-body">
                                <p>Click 'Delete' to <strong>parmenently</strong> delete this record. Click 'Cancel' to cancel your action.</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" id="DeleteBtnID" value="@item.id" data-dismiss="modal">Delete</button>
                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    }
</table>
@section scripts
{
   <script>
        $(document).ready(function () {

            $('#DeleteBtnParentID').on('click', '#DeleteBtnID', function (event) {
                alert('Test');
            });
        });
   </script>
}

我使用 Chrome 的开发者工具时的页面源截图 [您可以点击图片查看大图]：

【问题讨论】：

这与 ASP.NET Core 有什么关系？ angular/bootstrap 完全在客户端（=浏览器）中运行

标签： jquery twitter-bootstrap asp.net-core bootstrap-modal asp.net-core-viewcomponent

【解决方案1】：

答案更新

来自评论：

在表格之外会导致模态的删除按钮无法识别属性值@item.id，因为在foreach循环中使用了item变量。

解决这个问题的方法可以是：

将 value 属性附加到按钮，而不再附加到模态确认按钮
在模态显示事件上（即：show.bs.modal）从按钮获取此属性并将其保存到模态确认按钮
点击确认按钮时使用该属性

更新了sn-p：

$('#DeleteBtnID').on('click', function (event) {
    console.log('Test: ' + $(this).attr('value'));
});

$('#myModal').on('show.bs.modal', function (e) {
    var btnValue = $(e.relatedTarget).attr('value');
    $('#DeleteBtnID').attr('value', btnValue);
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="@item.id1">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="@item.id2">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal" value="@item.id3">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Click 'Delete' to <strong>parmenently</strong> delete this record. Click 'Cancel' to cancel your action.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID"  data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

来自您的代码：

@foreach（模型中的变量项）

ID 必须是唯一的。因此，我建议您在每个表格单元格中仅插入按钮并移出模态框，即：

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
 ..........
</div>

因此，事件将附加到唯一的模态按钮。

sn-p：

//
// If you need to delegate....
//
$(document).on('click', '#DeleteBtnID', function (event) {
    console.log('delegated Test');
});


$('#DeleteBtnID').on('click', function (event) {
    console.log('Test');
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete1</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete2</button>
<button type="button" class="btn btn-info btn-xs" data-toggle="modal" data-target="#myModal">Delete3</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-sm">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header btn-warning" style="font-weight:bold;color:white;">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h5 class="modal-title modal-sm">Delete Warning</h5>
            </div>
            <div class="modal-body">
                <p>Click 'Delete' to <strong>parmenently</strong> delete this record. Click 'Cancel' to cancel your action.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="DeleteBtnID" value="@item.id" data-dismiss="modal">Delete</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

【讨论】：

正如你在我的代码中看到的那样，触发模型的Delete 按钮也在Modal 之外。而且，在您的代码中，您的所有 3 个按钮也具有完全相同的属性\值。所以，我可能不理解您的代码中的某些内容。独特之处在哪里？你能解释一下吗？
这是有道理的。但是，如何将主键值传递给模态的删除按钮？由于在foreach 循环中使用了item 变量，因此在表格之外将导致模态的Delete 按钮无法识别<button ....id="DeleteBtnID" value="@item.id"....</button> 的属性值@item.id。
您更新的建议似乎是正确的，但由于某种原因，虽然模态框按预期显示，但 $('#myModal').on('show.bs.modal', function (e) { alert('Test' }); 仍然没有触发 alert('Test')。我正在使用最新版本的 Chrome，它也没有显示任何错误。
片段的工作原理是（当我在模态对话框中为每个删除单击 Delete 按钮时）它分别显示：Test: @item.id1, Test: @item.id2, Test: @item.id3。我的引导文件是 VS2015 在创建项目时使用默认的ASP.NET Core Web Application 模板默认安装的结果。在我的项目中，显示的版本是 Bottstrap 3.3.6。
由于我上面评论中描述的原因，我用你的例子创建了一个单独的帖子here..

【解决方案2】：

您正在尝试在 DeleteBtnParentID 下的第一级查找 DeleteBtnID。尝试使用 find 代替，它将搜索 DeleteBtnParentID 下的所有级别

 $('#DeleteBtnParentID').find("#DeleteBtnID").on('click', function (event) {
     alert('Test');
  });

【讨论】：