Comment déclencher un événement après avoir utilisé event.preventDefault ()

Je souhaite organiser un événement jusqu'à ce que je sois prêt à le déclencher, par exemple

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

   e.preventDefault(); 

   // do lots of stuff

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

}

Existe-t-il un équivalent à la run()fonction décrite ci-dessus?

Nan. Une fois l'événement annulé, il est annulé.

Vous pouvez toutefois relancer l'événement plus tard, en utilisant un indicateur pour déterminer si votre code personnalisé a déjà été exécuté ou non - comme celui-ci (veuillez ignorer la pollution flagrante de l'espace de noms):

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

Une variante plus généralisée (avec l'avantage supplémentaire d'éviter la pollution globale de l'espace de noms) pourrait être:

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:

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

Plugin jQuery super-minimaliste bonus avec Promisesupport:

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

Usage:

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

Une version plus récente de la réponse acceptée.

Version abrégée:

$('#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 bon cas d'utilisation pour quelque chose comme celui-ci est où vous pouvez avoir un code de formulaire hérité qui fonctionne, mais il vous a été demandé d'améliorer le formulaire en ajoutant quelque chose comme la validation de l'adresse e-mail avant de soumettre le formulaire. Au lieu de fouiller dans le code postal du formulaire principal, vous pouvez écrire une API, puis mettre à jour votre code frontal pour accéder à cette API avant d'autoriser le formulaire à faire son POST traditionnel.

Pour ce faire, vous pouvez implémenter un code similaire à ce que j'ai écrit ici:

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

    }

});

Vous pouvez faire quelque chose comme

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

Remplacez la propriété isDefaultPreventedcomme ceci:

$('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, c'est le moyen le plus complet de redéclencher l'événement avec exactement les mêmes données.

Il est possible d'utiliser currentTargetle event. L'exemple montre comment procéder avec l'envoi du formulaire. De même, vous pouvez obtenir la fonction de l' onclickattribut, etc.

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

  // code

  event.currentTarget.submit();
});

Ne l'exécutez pas e.preventDefault();ou ne l'exécutez pas sous condition.

Vous ne pouvez certainement pas modifier le moment où l'action d'événement d'origine se produit.

Si vous souhaitez "recréer" l'événement d'interface utilisateur d'origine quelque temps plus tard (par exemple, dans le rappel d'une requête AJAX), vous devrez simplement le simuler d'une autre manière (comme dans la réponse de vzwick) ... même si je remettre en question l'opportunité d'une telle approche.

Une réponse plus récente utilise habilement jQuery.one()

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

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

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

tant que "beaucoup de choses" ne font pas quelque chose d'asynchrone, cela est absolument inutile - l'événement appellera chaque gestionnaire sur son chemin dans l'ordre, donc s'il y a un événement onklick sur un élément parent, cela se déclenchera après l'onclik- l'événement de l'enfant a été traité complètement. javascript ne fait pas ici une sorte de "multithreading" qui rend "l'arrêt" du traitement des événements nécessaire. conclusion: «mettre en pause» un événement juste pour le reprendre dans le même gestionnaire n'a aucun sens.

si "beaucoup de trucs" est quelque chose d'asynchrone, cela n'a pas non plus de sens car cela empêche les choses asynchrones de faire ce qu'elles devraient faire (trucs asynchrones) et les fait baisser comme si tout était en séquence (où nous revenons à mon premier paragraphe )

L'approche que j'utilise est la suivante:

$('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 solution acceptée ne fonctionnera pas si vous travaillez avec une balise d'ancrage. Dans ce cas, vous ne pourrez plus cliquer sur le lien après avoir appelé e.preventDefault(). C'est parce que l'événement de clic généré par jQuery est juste une couche au-dessus des événements de navigateur natifs. Ainsi, le déclenchement d'un événement «clic» sur une balise d'ancrage ne suivra pas le lien. Au lieu de cela, vous pouvez utiliser une bibliothèque comme jquery-simulate qui vous permettra de lancer des événements de navigateur natifs.

Plus de détails à ce sujet peuvent être trouvés dans ce lien

Une autre solution consiste à utiliser window.setTimeout dans l'écouteur d'événements et à exécuter le code une fois le processus de l'événement terminé. Quelque chose comme...

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

J'utilise 0 pour la période car je m'en fous d'attendre.

Je sais que ce sujet est ancien mais je pense que je peux y contribuer. Vous pouvez déclencher le comportement par défaut d'un événement sur un élément spécifique à tout moment dans votre fonction de gestionnaire si vous connaissez déjà ce comportement. Par exemple, lorsque vous déclenchez l'événement de clic sur le bouton de réinitialisation, vous appelez en fait la fonction de réinitialisation sur le formulaire le plus proche comme comportement par défaut. Dans votre fonction de gestionnaire, après avoir utilisé la fonction preventDefault, vous pouvez rappeler le comportement par défaut en appelant la fonction de réinitialisation sur le formulaire le plus proche n'importe où dans votre code de gestionnaire.

Si cet exemple peut aider, ajoute un "popin de confirmation personnalisé" sur certains liens (je garde le code de "$ .ui.Modal.confirm", c'est juste un exemple pour le callback qui exécute l'action d'origine):

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