Come attivare un evento dopo aver utilizzato event.preventDefault ()

Voglio organizzare un evento fino a quando non sono pronto a lanciarlo, ad es

$('.button').live('click', function(e){

   e.preventDefault(); 

   // do lots of stuff

   e.run() //this proceeds with the normal event    

}

Esiste un equivalente alla run()funzione sopra descritta?

No. Una volta che l'evento è stato cancellato, viene cancellato.

Tuttavia, puoi ri-attivare l'evento in un secondo momento, utilizzando un flag per determinare se il tuo codice personalizzato è già stato eseguito o meno, ad esempio (ignora l'inquinamento palese dello spazio dei nomi):

var lots_of_stuff_already_done = false;

$('.button').on('click', function(e) {
    if (lots_of_stuff_already_done) {
        lots_of_stuff_already_done = false; // reset flag
        return; // let the event bubble away
    }

    e.preventDefault();

    // do lots of stuff

    lots_of_stuff_already_done = true; // set flag
    $(this).trigger('click');
});

Una variante più generalizzata (con l'ulteriore vantaggio di evitare l'inquinamento dello spazio dei nomi globale) potrebbe essere:

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

Uso:

var someThingsThatNeedToBeDoneFirst = function() { /* ... */ } // do whatever you need
$('.button').on('click', onWithPrecondition(someThingsThatNeedToBeDoneFirst));

Plugin jQuery super minimalista con Promisesupporto:

(function( $ ) {
    $.fn.onButFirst = function(eventName,         /* the name of the event to bind to, e.g. 'click' */
                               workToBeDoneFirst, /* callback that must complete before the event is re-fired */
                               workDoneCallback   /* optional callback to execute before the event is left to bubble away */) {
        var isDone = false;

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

            e.preventDefault();

            // capture target to re-fire event at
            var $target = $(this);

            // set up callback for when workToBeDoneFirst has completed
            var successfullyCompleted = function() {
                isDone = true;
                $target.trigger(e.type);
            };

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

            // check if workToBeDoneFirst returned a promise
            if (workResult && $.isFunction(workResult.then))
            {
                workResult.then(successfullyCompleted);
            }
            else
            {
                successfullyCompleted();
            }
        });

        return this;
    };
}(jQuery));

Uso:

$('.button').onButFirst('click',
    function(){
        console.log('doing lots of work!');
    },
    function(){
        console.log('done lots of work!');
    });

Una versione più recente della risposta accettata.

Breve versione:

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

    if ( !options.lots_of_stuff_done ) {
        e.preventDefault();
        $.ajax({
            /* do lots of stuff */
        }).then(function() {
            // retrigger the submit event with lots_of_stuff_done set to true
            $(e.currentTarget).trigger('submit', { 'lots_of_stuff_done': true });
        });
    } else {
        /* allow default behavior to happen */
    }

});

Un buon caso d'uso per qualcosa di simile è quello in cui potresti avere un codice del modulo legacy che funziona, ma ti è stato chiesto di migliorare il modulo aggiungendo qualcosa come la convalida dell'indirizzo email prima di inviare il modulo. Invece di scavare nel codice postale del modulo back-end, è possibile scrivere un'API e quindi aggiornare il codice front-end per colpire l'API prima di consentire al modulo di eseguire il POST tradizionale.

Per fare ciò, puoi implementare un codice simile a quello che ho scritto qui:

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

    if ( !options.email_check_complete ) {

        e.preventDefault(); // Prevent form from submitting.
        $.ajax({
            url: '/api/check_email'
            type: 'get',
            contentType: 'application/json',
            data: { 
                'email_address': $('email').val() 
            }
        })
        .then(function() {
            // e.type === 'submit', if you want this to be more dynamic
            $(e.currentTarget).trigger(e.type, { 'email_check_complete': true });
        })
        .fail(function() {
            alert('Email address is not valid. Please fix and try again.');
        })

    } else {

        /**
             Do traditional <form> post.
             This code will be hit on the second pass through this handler because
             the 'email_check_complete' option was passed in with the event.
         */

        $('#notifications').html('Saving your personal settings...').fadeIn();

    }

});

Puoi fare qualcosa del genere

$(this).unbind('click').click();

Sostituisci la proprietà in isDefaultPreventedquesto modo:

$('a').click(function(evt){
  evt.preventDefault();

  // in async handler (ajax/timer) do these actions:
  setTimeout(function(){
    // override prevented flag to prevent jquery from discarding event
    evt.isDefaultPrevented = function(){ return false; }
    // retrigger with the exactly same event data
    $(this).trigger(evt);
  }, 1000);
}

IMHO, questo è il modo più completo per riattivare l'evento con gli stessi dati.

È possibile utilizzare currentTargetil event. L'esempio mostra come procedere con l'invio del modulo. Allo stesso modo potresti ottenere la funzione dall'attributo onclickecc.

$('form').on('submit', function(event) {
  event.preventDefault();

  // code

  event.currentTarget.submit();
});

Basta non esibirsi e.preventDefault();o eseguirlo in modo condizionale.

Non puoi certo cambiare quando si verifica l'azione dell'evento originale.

Se vuoi "ricreare" l'evento UI originale qualche tempo dopo (diciamo, nel callback per una richiesta AJAX), dovrai solo falsificarlo in un altro modo (come nella risposta di Vzwick) ... anche se avrei mettere in dubbio l'usabilità di un tale approccio.

Una risposta più recente utilizza abilmente jQuery.one()

$('form').one('submit', function(e) {
    e.preventDefault();
    // do your things ...

    // and when you done:
    $(this).submit();
});

https://stackoverflow.com/a/41440902/510905

fintanto che "un sacco di cose" non fa qualcosa di asincrono, questo è assolutamente inutile - l'evento chiamerà ogni gestore sulla sua strada in sequenza, quindi se c'è un evento onklick su un elemento genitore questo si attiverà dopo l'onclik- l'evento del bambino è stato elaborato completamente. javascript qui non fa una sorta di "multithreading" che rende necessario "arrestare" l'elaborazione dell'evento. conclusione: "mettere in pausa" un evento solo per riprenderlo nello stesso gestore non ha alcun senso.

se "un sacco di roba" è qualcosa di asincrono, anche questo non ha senso in quanto impedisce alle cose asincrone di fare ciò che dovrebbero fare (cose asincrone) e renderle bahave come tutto è in sequenza (dove torniamo al mio primo paragrafo )

L'approccio che uso è questo:

$('a').on('click', function(event){
    if (yourCondition === true) { //Put here the condition you want
        event.preventDefault(); // Here triggering stops
        // Here you can put code relevant when event stops;
        return;
    }
    // Here your event works as expected and continue triggering
    // Here you can put code you want before triggering
});

La soluzione accettata non funzionerà nel caso in cui si lavori con un tag anchor. In questo caso non sarà possibile fare nuovamente clic sul collegamento dopo aver chiamato e.preventDefault(). Questo perché l'evento click generato da jQuery è semplicemente sovrapposto agli eventi del browser nativo. Quindi l'attivazione di un evento "clic" su un tag anchor non seguirà il collegamento. Invece potresti usare una libreria come jquery-simulate che ti permetterà di lanciare eventi del browser nativi.

Maggiori dettagli su questo possono essere trovati in questo link

Un'altra soluzione è utilizzare window.setTimeout nel listener di eventi ed eseguire il codice al termine del processo dell'evento. Qualcosa di simile a...

window.setTimeout(function() {
  // do your thing
}, 0);

Uso 0 per il periodo poiché non mi interessa attendere.

So che questo argomento è vecchio ma penso di poter contribuire. È possibile attivare il comportamento predefinito di un evento su un elemento specifico in qualsiasi momento nella funzione del gestore se si conosce già quel comportamento. Ad esempio, quando si attiva l'evento click sul pulsante di ripristino, in realtà si chiama la funzione di ripristino sul modulo più vicino come comportamento predefinito. Nella funzione del gestore, dopo aver utilizzato la funzione preventDefault, è possibile richiamare il comportamento predefinito chiamando la funzione di ripristino sul modulo più vicino in qualsiasi punto del codice del gestore.

Se questo esempio può essere d'aiuto, aggiunge un "popin di conferma personalizzato" su alcuni collegamenti (mantengo il codice di "$ .ui.Modal.confirm", è solo un esempio per il callback che esegue l'azione originale):

//Register "custom confirm popin" on click on specific links
$(document).on(
    "click", 
    "A.confirm", 
    function(event){
        //prevent default click action
        event.preventDefault();
        //show "custom confirm popin"
        $.ui.Modal.confirm(
            //popin text
            "Do you confirm ?", 
            //action on click 'ok'
            function() {
                //Unregister handler (prevent loop)
                $(document).off("click", "A.confirm");
                //Do default click action
                $(event.target)[0].click();
            }
        );
    }
);