使用Twitter引导程序确认删除模态/对话框不起作用 [英] Confirm delete modal/dialog with Twitter bootstrap not working

问题描述

我的 ViewComponent VS2015上的c0>项目具有使用Twitter引导程序进行的确认删除模态/对话框，如下所示.但是，当用户单击Delete按钮确认删除时，它不会触发如下所示的jquery函数.模态/对话框弹出得很好，但是当我单击模态/对话框中带有id= DeleteBtnID的删除按钮时，我希望它弹出`alert('Test')，但这没有发生.问题:我可能会缺少什么? Chrome的开发人员工具中不会显示任何错误.

A ViewComponent in my ASP.NET Core 1.1 project on VS2015 has a confirm delete modal/dialog with Twitter bootstrap as shown below. But when a user clicks on the Delete button to confirm a delete it does not trigger the jquery function shown below. The modal/dialog pops up fine but when I click on delete button with id= DeleteBtnID inside the modal/dialog I would expect it to popup the `alert('Test') but that is not happening. Question: What I may be missing? No errors are shown in Chrome's Developer Tool.

调用ViewComponent的视图:

@model MyProj.Models.TestModel

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

ViewComponent :

@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的开发人员嘟嘟声时的页面源快照 [您可以点击图像查看大图]:

Snapshot of the page source when I use Chrome's developer toot [You can click on the image for a larger view]:

推荐答案

答案更新

摘自评论:

由于在foreach循环中使用了item变量，因此位于表格之外会使模式的Delete按钮无法识别属性值@ item.id.

Being outside the table will cause the modal's Delete button to not to recognize the attribute value @item.id of since item variable is used in the foreach loop.

解决这一问题的方法可以是:

A way to solve this point can be:

• 将value属性附加到按钮上，而不再将其附加到模式确认按钮上
• 关于模式展示事件(即: show.bs.modal )获得此属性从按钮保存到模式确认按钮
• 点击确认按钮时使用此属性

• attach the value attribute to the button and no more to the modal confirm button
• on modal show event (i.e.: show.bs.modal) get this attribute from button and save it to modal confirm button
• use this attribute when clicking on confirmation button

更新的代码段:

$('#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(模型中的变量项)

@foreach (var item in Model)

ID必须是唯一的.因此，我建议您仅在每个表格单元格中插入按钮，然后将其移出模态，即:

The IDs must be unique. So, I suggest you to insert in each table cell only the button and move outside the modal, i.e.:

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

因此，该事件将附加到唯一的模式按钮上.

So, the event will be attached to the unique modal button.

摘要:

//
// 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>

这篇关于使用Twitter引导程序确认删除模态/对话框不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！