javascript - 函数调用正在堆积

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)

}

再次:

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

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

Answer 1

你的问题是，每次你打开新的模式，你绑定(bind)到 div.modal-footer button.btn.btn-primary 按钮，所以当你关闭模式时，它仍然存在，当你打开一个新的时，你会在上面再次绑定(bind)。

绑定(bind)到命名空间的点击事件并在之前解除绑定(bind)，因此您始终只有一个处理程序:

$('div.modal-footer button.btn.btn-primary').off('click.close').on('click.close', function () {
    deleteItem(itemId)
    $('#main-modal').modal('hide')   
})

工作 fiddle :https://jsfiddle.net/aq9Laaew/219529/

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