Verhindern, dass mehrere Klickereignisse JQuery auslösen

Hier ist das Szenario, mein Inhalt wird basierend auf einer Klasse asynchron geladen. Wenn ich also einen Link mit der Klasse ajaxLink habe, wird er wie folgt ausgelöst:

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

    });

Alles schön. Jetzt möchte ich dem Benutzer in einem Fall eine Warnung anzeigen, um confirm dass sie die Seite laden und alle ihre Änderungen verlieren möchten, also habe ich dies geschrieben:

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

jetzt habe ich es versucht return false, e.preventDefault() und e.stopPropagation(); aber egal was die erste methode immer gefeuert wird? Wie kann ich verhindern, dass das zusätzliche Klickereignis ausgelöst wird? Ist das eine Sache mit der Reihenfolge der Ereignisse?

Verstehe nicht, inwiefern dies relevant ist, aber mein HTML ist:

<a style="" href="https://stackoverflow.com/CMS/CreateANewHotel?regionID=3&amp;destinationID=1&amp;countryName=Australia" class="button wideBorderlessButton ajaxLink addANewHotel">Add a new hotel</a>

Hast du es versucht: event.stopImmediatePropagation?

Ich glaube das ist das was du suchst:

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

stopPropagation würde das Bubbling des Ereignisses zu den übergeordneten Elementen stoppen, nicht aber das Auslösen anderer Klick-Handler auf demselben Element verhindern. Deine Lösung wird also nicht funktionieren.

Du könntest es zum Beispiel so machen:

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

});

Wenn Sie viele verschiedene Arten von Links haben, sollten Sie den gemeinsamen Code in eine Funktion einfügen und die Handler mithilfe der differenzierenden Klasse binden. Diese Handler können dann gegebenenfalls den allgemeinen Code aufrufen.