Вызов функции складывается - PullRequest
Новая
       10

Вызов функции складывается

0 голосов
/ 17 сентября 2018

У меня есть модальный бутстрап, который показывает подтверждающее сообщение.Если нажата кнопка «принять», то вызывается функция с идентификатором, если нажаты кнопки «отмена» или «закрыть», то модальное закрытие.Проблема в том, что, когда отображается модальное окно, если я нажал на кнопку «Отмена», а затем снова открыл модальное окно, и в этот раз я нажимаю «Принять», функция вызывается дважды, один раз за время, когда я нажал «Отмена», и один раз длявремя, когда я нажал «принять».Как я могу предотвратить это? 

$(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 - текущая строка, которую я нажимаюна.

1 Ответ

0 голосов
/ 17 сентября 2018

Ваша проблема в том, что каждый раз, когда вы открываете новый модал, вы привязываетесь к кнопке div.modal-footer button.btn.btn-primary, поэтому, когда вы закрываете модал, он все еще там, а когда вы открываете новый, вы связываете снова поверх этого.

Привязать к событию щелчка в пространстве имен и отменить его непосредственно перед тем, чтобы у вас всегда был только один обработчик: 

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

Рабочая скрипка: https://jsfiddle.net/aq9Laaew/219529/

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

...