Функция, переданная в качестве параметра в другую функцию, запускается мультипликативно

Question

У меня есть функция, которая создает модальное окно с кнопками «Подтвердить» и «Отмена». Для функции требуется параметр action, через который вызывается другая функция. В этом примере action является вызовом AJAX для отказа от подписки.

Только после нажатия кнопки «Подтвердить» выполняется вызов AJAX.

Вот когда происходят странные вещи. После первого раза, каждый раз, когда я снова нажимаю кнопку «Подтвердить», он запускает действие в другой раз. Итак, в первый раз, когда он запускает действие только один раз, во второй раз, когда он запускает его дважды, в третий раз, когда он запускает его трижды. И т.д.

Я почесал голову над этим некоторое время. Похоже, что параметр action сохраняет свою функциональность, и каждый вновь введенный action добавляется к этому.

$.createActionModal = function( params, action ) {      
    if ( typeof params.title === 'undefined' ) { params.title= ''; }

    var actionModal = $( '#action-modal' );

    actionModal.find( '.modal-title' ).html( params.title );

    actionModal.show();

    actionModal.on( 'click', '.confirm-button', function( e ) {
        e.preventDefault();

        // Fire the action if "Confirm" is clicked
        action();

        actionModal.hide();

        return true;
    } );

    actionModal.on( 'click', '.cancel-button', function( e ) {
        e.preventDefault(); 

        actionModal.hide();

        return false;
    } );
}

Затем в другом файле я использую эту функцию, чтобы показать модальное окно с двумя вариантами: Подтвердить и Отменить.

$(document).on( 'click', '.unsubscribe-button', function( e ) {
    e.preventDefault();

    var thisButton = $(this);

    var data = {
        'action': 'unsubscribe',
        'author_id': parseInt( thisButton.attr( 'data-author-id' ) ),
    };

    // Modal function is called here, the action paramater is a function wrapping the AJAX function
    $.createActionModal(
        {
            'title':    'Are you sure you want to unsubscribe?'
        },
        function() {
            subscription_ajax( thisButton, data );
        }
    );

});

И, наконец, вызов AJAX, который передается как action.

var subscription_ajax = function( thisButton, data ) {
    $.ajax({
        url: ajax_url,
        type: 'POST',
        data: data,
        success: function( response ) {     

            console.log( 'Testing' );

            // ... Does ajax stuff

        }
    });
}

Answer 1

Похоже, что при каждом нажатии на $ ('. Unsubscribe-button') снова вызывается $ .createActionModal (), присоединяя новые слушатели событий к его кнопкам (пока старые еще есть).

Создайте модальное и присоедините слушателей один раз, и при нажатии кнопки только покажите его.