javascript - 在其他函数中作为参数传递的函数被乘法触发

Question

我有一个函数可以创建一个带有“确认”和“取消”按钮的模式窗口。该函数需要一个 action 参数，通过该参数调用另一个函数。在示例中，此操作是取消订阅 AJAX 调用。

只有点击“确认”后，才会进行AJAX调用。

这就是奇怪的事情发生的时候。第一次之后，每次我再次单击“确认”按钮时，它都会再次触发该操作。因此，第一次它只触发一次 Action ，第二次它触发两次，第三次它触发三次。等等

我已经为这个问题摸不着头脑有一段时间了。看起来好像 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()，将新的事件监听器附加到其按钮(而旧的事件监听器仍然存在)。

创建模态并附加监听器一次，然后单击按钮仅显示它。