作为参数传递给其他函数的函数正被乘法触发

Question

I have a function that creates a modal window with a "Confirm" and "Cancel" button. The function requires an action parameter, through which another function is called. In the example, this action is the unsubscribe AJAX call.

Only after "Confirm" is clicked, the AJAX call is made.

Here's when weird things happen. After the first time, each and every time I click the "Confirm" button again, it fires the action another time. So the first time it fires the action just once, the second time it fires it twice, the third time it fires it thrice. Etc.

I've been scratching my head over this for a while. It almost seems as if the action parameter keeps it's functionality, and every newly inputted action is added on top of that.

$.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;
    } );
}

Then in another file, I use this function to show a modal window with two options, Confirm and Cancel.

$(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 );
        }
    );

});

And finally, the AJAX call that's being passed as the 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

Looks like with every click on $('.unsubscribe-button'), $.createActionModal() is called again, attaching new event listeners to its buttons (while the old ones are still there).

Create modal and attach listeners once, and on button click only show it.