web-dev-qa-db-fra.com

Empêcher plusieurs événements de clic de déclencher JQuery

Voici le scénario, mon contenu est chargé de manière asynchrone en fonction d'une classe. Donc, si j'ai un lien avec la classe ajaxLink, il se déclenche comme ci-dessous:

$('a.ajaxLink').click(function (e) {
        e.preventDefault();
        var container = $(this).parents('div.fullBottomContent');
        var href = $(this).attr('href');
        container.fadeOut('fast', function () {
            $.ajax({
                url: href,
                dataType: "html",
                type: "GET",
                success: function (data) {
                    container.html(data);
                    BindEventHandlers();
                    container.fadeIn();
                    $.validator.unobtrusive.parse('form');
                },
                error: function () {
                    alert('An error has occurred');
                }
            });
        });

    });

Tout beau. Maintenant, dans un cas, je veux afficher un avertissement à l'utilisateur pour confirm qu'il veut charger la page et perdre toutes ses modifications, j'ai donc écrit ceci:

$('a.addANewHotel').click(function (e) {
        if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
            e.stopPropagation();
        }
    });

maintenant j'ai essayé return false, e.preventDefault() et e.stopPropagation(); mais peu importe ce que la première méthode est toujours tirée? Comment puis-je empêcher l'événement de clic supplémentaire de se déclencher? Est-ce une chose d'ordre des événements?

Je ne vois pas en quoi cela est pertinent mais mon HTML est:

<a style="" href="/CMS/CreateANewHotel?regionID=3&amp;destinationID=1&amp;countryName=Australia" class="button wideBorderlessButton ajaxLink addANewHotel">Add a new hotel</a>
jqueryconfirm
22
Liam

As-tu essayé: event.stopImmediatePropagation?

Je crois que c'est ce que vous recherchez:

http://api.jquery.com/event.stopImmediatePropagation/

$('a.addANewHotel').click(function (e) {
        if (!confirm('Adding a new hotel will loose any unsaved changes, continue?')) {
            e.stopImmediatePropagation();
            e.preventDefault();
        }
    });
37
bstakes

stopPropagation empêcherait l'événement de se propager aux éléments parents, et n'empêcherait pas le déclenchement d'autres gestionnaires de clics sur le même élément. Votre solution ne fonctionnera donc pas.

Vous pouvez le faire comme ceci par exemple:

$('a.ajaxLink').click(function (e) {
    e.preventDefault();

    if($(this).hasClass("a.addANewHotel") &&
           !confirm('Adding a new hotel will loose any unsaved changes, continue?')){
        return false;
    }

    var container = $(this).parents('div.fullBottomContent');
    var href = $(this).attr('href');
    container.fadeOut('fast', function () {
        $.ajax({
            url: href,
            dataType: "html",
            type: "GET",
            success: function (data) {
                container.html(data);
                BindEventHandlers();
                container.fadeIn();
                $.validator.unobtrusive.parse('form');
            },
            error: function () {
                alert('An error has occurred');
            }
        });
    });

});

Si vous avez beaucoup de types de liens différents, vous devez mettre le code commun dans une fonction et lier les gestionnaires à l'aide de la classe de différenciation. Ces gestionnaires peuvent ensuite appeler le code commun lorsque cela est approprié.

2
Asciiom