Question

我有一个引导程序模式，它显示确认消息。如果单击“接受”按钮，则使用id调用函数，如果单击“取消”或“关闭”按钮，则模式关闭。问题是，当显示模态时，如果我单击取消，然后再次打开模态，这次我单击“接受”，则该函数被调用两次，一次是单击取消，一次是我点击“接受”的时间。我该如何预防？

$(document).ready(initItems)


function initItems() {
    $('.delete-item').on('click', initItemDeletion)
}

function initItemDeletion() {
    const itemId = $(this).data('item-id')
    $('h5.modal-title').text('Confirmation')
    $('div.modal-content div.modal-body').text('Are you sure you want to delete this item?')
    $('div.modal-footer button.btn.btn-primary').text('Yes, Delete It!')
    $('#main-modal').modal()
    $('div.modal-footer button.btn.btn-primary').click(() => {
        deleteItem(itemId)
        $('#main-modal').modal('hide')   
    })
    return 

}

function deleteItem(itemId) {
    console.log('deleting item...' + itemId)

}

再次：

单击链接：显示模式，但我单击“取消”。控制台打印：无内容
单击链接：显示模式，但我单击接受。控制台打印：删除项目... 2 删除项目... 9

其中项目2是我第一次单击的项目的行，而9是我正在单击的当前行。

Answer 1

您的问题是，每次打开新模态时，您都绑定到const Car = (function() { function internal(car) { console.log("internal"); } class Car { constructor(color) { this.color = color; } gas() { internal(this); // ... } break() { // ... } } return Car; })(); let car = new Car("red"); car.gas(); console.log(car);按钮，因此当您关闭模态时，它仍然存在，而当您打开新模态时，您将再次绑定到该模态上。

绑定到命名空间的click事件并在之前将其取消绑定，因此您始终只有一个处理程序：

div.modal-footer button.btn.btn-primary

正在工作的小提琴：https://jsfiddle.net/aq9Laaew/219529/

https://api.jquery.com/event.namespace/

函数调用被堆叠

1 个答案: