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

Voici le scénario, mon contenu est chargé de manière asynchrone basé sur une classe. Donc, si j'ai un lien avec la classe ajaxLink il tire 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');
                }
            });
        });

    });

Tous beaux. Maintenant, dans un cas, je veux afficher un message d'avertissement à l'utilisateur de confirm qu'ils veulent pour charger la page et perdent toutes leurs 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 que j'ai essayé return falsee.preventDefault() et e.stopPropagation(); mais peu importe ce que la première méthode est toujours déclenché? Comment puis-je empêcher les extra-cliquez sur déclenchement de l'événement? Est-ce un ordre des événements chose?

Ne vois pas en quoi cela est pertinent, mais mon code 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>

source d'informationauteur Liam

  1. 29

    Avez-vous essayé: event.stopImmediatePropagation?

    Je crois que c'est ce que vous cherchez:

    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();
        }
    });
  2. 1

    stopPropagation serait d'arrêter la manifestation de propagation pour les éléments de parent, de ne pas empêcher les autres gestionnaires de clic sur le même élément de la cuisson. Si votre solution ne fonctionne pas.

    Vous pourriez 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 m'avez beaucoup de différents types de liens, vous devez mettre le code dans une fonction, et lier les gestionnaires à l'aide de la différenciation de classe. Ces gestionnaires peuvent ensuite appeler le code commun lorsque cela est approprié.