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

});

最后，作为action传递的AJAX调用。

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（），将新的事件侦听器附加到其按钮上（而旧的事件侦听器仍在那里）。

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

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

1 个答案: