Cómo activar un evento después de usar event.preventDefault ()

Quiero celebrar un evento hasta que esté listo para dispararlo, por ejemplo

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

   e.preventDefault(); 

   // do lots of stuff

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

}

¿Hay un equivalente a la run()función descrita anteriormente?

No Una vez que el evento ha sido cancelado, se cancela.

Sin embargo, puede volver a disparar el evento más adelante, utilizando una bandera para determinar si su código personalizado ya se ha ejecutado o no, como este (ignore la flagrante contaminación del espacio de nombres):

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 más generalizada (con el beneficio adicional de evitar la contaminación global del espacio de nombres) podría ser:

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

Bonus jQuery súper minimalista con Promisesoporte:

(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 versión más reciente de la respuesta aceptada.

Versión breve:

$('#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 buen caso de uso para algo como esto es cuando puede tener algún código de formulario heredado que funcione, pero se le ha pedido que mejore el formulario agregando algo como validación de dirección de correo electrónico antes de enviar el formulario. En lugar de buscar en el código postal del formulario back-end, puede escribir una API y luego actualizar su código front-end para acceder a esa API primero antes de permitir que el formulario haga su POST tradicional.

Para hacer eso, puede implementar un código similar al que he escrito aquí:

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

    }

});

Puedes hacer algo como

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

Anule la propiedad de isDefaultPreventedesta manera:

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

En mi humilde opinión, esta es la forma más completa de volver a activar el evento con exactamente los mismos datos.

Es posible utilizar currentTargetel event. El ejemplo muestra cómo proceder con el envío del formulario. Del mismo modo, podría obtener la función del onclickatributo, etc.

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

  // code

  event.currentTarget.submit();
});

Simplemente no realice e.preventDefault();, o realice condicionalmente.

Ciertamente no puede modificar cuando ocurre la acción del evento original.

Si desea "recrear" el evento de IU original algún tiempo después (por ejemplo, en la devolución de llamada para una solicitud de AJAX), entonces tendrá que fingirlo de otra manera (como en la respuesta de vzwick) ... aunque yo cuestionar la usabilidad de tal enfoque.

Una respuesta más reciente utiliza hábilmente jQuery.one()

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

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

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

mientras "un montón de cosas" no esté haciendo algo asíncrono, esto es absolutamente innecesario: el evento llamará a cada controlador en su camino en secuencia, por lo que si hay un evento onklick en un elemento padre, esto se disparará después del onclik- evento del niño ha procesado por completo. javascript no hace algún tipo de "subprocesamiento múltiple" aquí que hace que "detener" el procesamiento de eventos sea necesario. conclusión: "pausar" un evento solo para reanudarlo en el mismo controlador no tiene ningún sentido.

si "muchas cosas" es algo asíncrono, esto tampoco tiene sentido, ya que impide que las cosas asíncronas hagan lo que deberían hacer (cosas asincrónicas) y que se comporten como si todo estuviera en secuencia (donde volvemos a mi primer párrafo )

El enfoque que uso es este:

$('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 solución aceptada no funcionará en caso de que esté trabajando con una etiqueta de anclaje. En este caso, no podrá volver a hacer clic en el enlace después de llamar e.preventDefault(). Eso es porque el evento de clic generado por jQuery es solo una capa encima de los eventos del navegador nativo. Por lo tanto, activar un evento 'clic' en una etiqueta de anclaje no seguirá el enlace. En su lugar, podría usar una biblioteca como jquery-simulate que le permitirá iniciar eventos del navegador nativo.

Más detalles sobre esto se pueden encontrar en este enlace

Otra solución es usar window.setTimeout en el detector de eventos y ejecutar el código una vez que el proceso del evento haya finalizado. Algo como...

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

Uso 0 para el período ya que no me importa esperar.

Sé que este tema es antiguo, pero creo que puedo contribuir. Puede activar el comportamiento predeterminado de un evento en un elemento específico en cualquier momento en su función de controlador si ya conoce ese comportamiento. Por ejemplo, cuando activa el evento click en el botón de reinicio, en realidad llama a la función de reinicio en el formulario más cercano como comportamiento predeterminado. En su función de controlador, después de usar la función preventDefault, puede recuperar el comportamiento predeterminado llamando a la función de reinicio en el formulario más cercano en cualquier parte de su código de controlador.

Si este ejemplo puede ayudar, agrega un "popin de confirmación personalizado" en algunos enlaces (conservo el código de "$ .ui.Modal.confirm", es solo un ejemplo para la devolución de llamada que ejecuta la acción original):

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