javascript - 确认删除的模态对话框

Question

我正在关注这个 ( Bootstrap modal to confirm table row delete ) 但我不确定为什么，但是模态对话框没有出现。

虽然我的表是由我的 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 调用，但我只是在努力让对话框出现。知道为什么吗？

谢谢

Answer 1

当您绑定(bind)删除按钮点击事件时，您的 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