区分 Bootstrap Modal 中的按钮

Question

我正在使用 bootstrap 为我正在进行的一个小项目创建一个快速的网站。

我正在使用模态框让用户确认操作，但我不确定如何区分模态框内按下的按钮。有一个删除按钮和一个取消按钮。

代码：

$('.deleteButton').click((event) => {

                $('#confirmDeleteSingleInfractionModal').modal('toggle');

                let data = {
                    infractionID: $(event.target).attr('referencedInfraction'),
                    targetUserID: $(event.target).attr('targetUserID')
                }


                console.log(data);


                $('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (close) {

                    
                    if ($(close.relatedTarget).hasClass('cancelButton'))
                        return;



                    console.log('deleting');

                    $.ajax({
                        type: 'delete',
                        url: `${window.location.origin}/dataLink/infraction`,
                        data,
                        success: () => {

                        },
                        error: () => {
                            showInfractionDeleteError();
                        }
                    })

                })
            });

我给所有的取消按钮一个 cancelButton 类，这样我就可以使用 jQuery 来检查它是否是一个取消按钮。

但是，我注意到它仍然没有返回，即使它有类（按钮代码如下）

<div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
                    </svg> Delete </button>
                <button type="button" class="cancelButton btn btn-primary" data-dismiss="modal">Cancel</button>
            </div>

如果有人对当按下的按钮具有cancelButton 类或任何其他方式来做我想做的事情时如何让它返回有任何建议，那将不胜感激。

提前致谢。

Answer 1

在hide.bs.modal，function (close) { 中提供的事件与$('.deleteButton').click((event) => { 中提供的事件不同。

在您的代码中，每次单击 .deleteButton 时，都会切换模式显示...并且注册了一个新的 hide.bs.modal 事件侦听器（不会立即执行）...但是几毫秒后，模式切换触发hide.bs.modal...让您认为它与.deleteButton点击直接相关...这是错误的。

这可能会令人困惑，我同意。

假设在另一个事件处理程序中注册一个事件处理程序在 99% 的情况下都是错误的。

每次模态关闭时都会执行hide.bs.modal 事件处理程序中的内容。不管是什么原因。如果你 console.log close.relatedTarget... 你会注意到它不是对 .deleteButton 按钮的引用。大概就是undefined（我没查）。

所以这是我的建议：

$('.deleteButton').click((event) => {
    
    // Something to do when a .deleteButton is clicked
    
    $('#confirmDeleteSingleInfractionModal').modal('toggle');

    let data = {
        infractionID: $(event.target).attr('referencedInfraction'),
        targetUserID: $(event.target).attr('targetUserID')
    }

    console.log(data);
    console.log('deleting');

    $.ajax({
        type: 'delete',
        url: `${window.location.origin}/dataLink/infraction`,
        data,
        success: () => {

        },
        error: () => {
            showInfractionDeleteError();
        }
    })
});

$('.cancelButton').click((event) => {

  // Something to do when a .cancelButton is clicked
  // ...
})

$('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (close) {

  // Something else to do on modal close (Whatever the close reason)
  // ...
})

Answer 2

$('#confirmDeleteSingleInfractionModal').on('hide.bs.modal', function (close) {...}

嵌套在

$('.deleteButton').click((event) {...}

所以我会把它从那里拿出来。

其次，为两个不同的按钮（取消和删除）提供两个不同的事件处理程序，并在每个事件处理程序中处理您希望的操作。 为了区分模态中按下的按钮之间的区别，您可以为每个按钮提供两个不同的类。让我们为取消按钮应用“cancel-button”类，为删除按钮应用“delete-button”。

$('.cancel-button').click((event) => {
     // cancel action
})

$('.delete-button').click((event) => {
     // delete action
})