jQuery Event Handling: How to Re-trigger Events After Using preventDefault

The Irreversible Nature of Event Prevention

In jQuery event handling, the event.preventDefault() method is used to prevent the default behavior of elements, such as form submissions or link navigation. However, a crucial but often overlooked characteristic is that once an event is canceled, it cannot be directly resumed. This means there is no equivalent to a run() method to continue the prevented event flow.

Flag-Based Implementation Approach

The most straightforward solution involves using boolean flags to control event processing logic. When an event is first triggered, set the flag and prevent default behavior; after completing custom operations, re-trigger the event, allowing normal propagation based on the flag state.

var lots_of_stuff_already_done = false;

$('.button').on('click', function(e) {
    if (lots_of_stuff_already_done) {
        lots_of_stuff_already_done = false;
        return;
    }

    e.preventDefault();
    
    // Perform custom operations
    console.log('Executing extensive processing logic');
    
    lots_of_stuff_already_done = true;
    $(this).trigger('click');
});

Higher-Order Function Encapsulation

To avoid global namespace pollution, a higher-order function approach can be employed to create reusable solutions. This method encapsulates state management within closures, providing better code organization.

function onWithPrecondition(callback) {
    var isDone = false;

    return function(e) {
        if (isDone === true) {
            isDone = false;
            return;
        }

        e.preventDefault();
        callback.apply(this, arguments);
        isDone = true;
        $(this).trigger(e.type);
    };
}

// Usage example
var someThingsThatNeedToBeDoneFirst = function() {
    console.log('Executing precondition processing');
};
$('.button').on('click', onWithPrecondition(someThingsThatNeedToBeDoneFirst));

jQuery Plugin Implementation

For more elegant APIs and enhanced functionality, the solution can be encapsulated as a jQuery plugin. This implementation supports Promises, enabling handling of asynchronous operations.

(function($) {
    $.fn.onButFirst = function(eventName, workToBeDoneFirst, workDoneCallback) {
        var isDone = false;

        this.on(eventName, function(e) {
            if (isDone === true) {
                isDone = false;
                workDoneCallback && workDoneCallback.apply(this, arguments);
                return;
            }

            e.preventDefault();
            var $target = $(this);

            var successfullyCompleted = function() {
                isDone = true;
                $target.trigger(e.type);
            };

            var workResult = workToBeDoneFirst.apply(this, arguments);

            if (workResult && $.isFunction(workResult.then)) {
                workResult.then(successfullyCompleted);
            } else {
                successfullyCompleted();
            }
        });

        return this;
    };
}(jQuery));

// Usage example
$('.button').onButFirst('click',
    function() {
        console.log('Performing extensive work!');
        return $.Deferred().resolve(); // Simulate async operation
    },
    function() {
        console.log('Work completed!');
    });

Practical Application Scenarios

This pattern is particularly valuable in scenarios such as form validation and asynchronous operation preprocessing. For example, email validation before form submission:

$('#signup_form').on('submit', function(e, options) {
    options = options || {};

    if (!options.email_check_complete) {
        e.preventDefault();
        $.ajax({
            url: '/api/check_email',
            type: 'get',
            data: { 'email_address': $('#email').val() }
        }).then(function() {
            $(e.currentTarget).trigger('submit', { 'email_check_complete': true });
        }).fail(function() {
            alert('Email address is not valid. Please fix and try again.');
        });
    } else {
        $('#notifications').html('Saving your personal settings...').fadeIn();
    }
});

Technical Summary

The core of implementing delayed event triggering lies in state management and event re-triggering mechanisms. Key considerations include avoiding infinite recursion, properly handling asynchronous operations, and maintaining good code encapsulation. Through appropriate architectural design, complex event control logic can be implemented without disrupting the existing event system.