确认删除的模式对话框

Modal dialog to confirm delete

本文关键字：对话框 模式 删除 确认      更新时间：2023-09-26

我正在关注这一点（引导模式以确认表行删除），但我不确定原因，但模式对话框没有出现。

虽然我的表是由我的jQuery代码动态创建的，但我希望基本上也能做同样的事情：

$("#guests_table > tbody:last").append(
    "<tr class='btnDelete' data-id='" + guest.guest_id + "'>"
    + "<td>" + guest.guest_first_name + "</td>"
    + "<td>" + guest.guest_last_name + "</td>"
    + "<td>" + guest.guest_email + "</td>"
    + "<td>" + "<a href='editguest.html?guestId=" + guest.guest_id + "&hostId=" + hostId + "&registryId=" + guest.registry_id + " '>"
    + "<img src='images/edit26.png' height='60%' width='60%'></a></td>"
    + "<td><button class='btnDelete' href=''>delete</button></td>"
    + "</tr>");
});

在HTML页面的头部：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

模式对话框：

<!-- start: Delete Coupon Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
    aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                    aria-hidden="true">&times;</button>
                <h3 class="modal-title" id="myModalLabel">Warning!</h3>
            </div>
            <div class="modal-body">
                <h4>Are you sure you want to DELETE?</h4>
            </div>
            <!--/modal-body-collapse -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" id="btnDelteYes" href="#">Yes</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
            </div>
            <!--/modal-footer-collapse -->
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

JS页面中的按钮调用：

$('btn.btnDelete').on('click', function (e) {
    e.preventDefault();
    var id = $(this).closest('tr').data('id');
    $('#myModal').data('id', id).modal('show');
});
$('#btnDelteYes').click(function () {
    var id = $('#myModal').data('id');
    $('[data-id=' + id + ']').remove();
    $('#myModal').modal('hide');
});

在删除时，我有一个API调用要删除，但我只是很难让对话框出现。知道为什么吗？

感谢

绑定删除按钮点击事件时CSS选择器的问题。它应该是.btn.btnDelete，注意前面的.或它。

$('.btn.btnDelete').on('click', function (e) {
    e.preventDefault();
    var id = $(this).closest('tr').data('id');
    $('#myModal').data('id', id).modal('show');
});

还要确保删除按钮具有btn类，这样才能工作：

<button class='btn btnDelete' href=''>delete</button>
<!--    add btn ^ class    -->

演示：http://plnkr.co/edit/X2hybmfUXGlFlaoFX4Al?p=preview

相关文章：