Prevent multiple click events firing JQuery

Question

Here's the scenario, my content is loaded asynchronously based on a class. So if I have a link with the class ajaxLink it fires as below:

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

    });

All lovely. Now in one instance I want to display a warning to the user to confirm that they want to load the page and loose all their changes so I've written this:

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

now I've tried return false, e.preventDefault() and e.stopPropagation(); but no matter what the first method is always fired? How can I prevent the extra click event from firing? Is this an order of events thing?

Don't see how this is relevant but my HTML is:

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

Answer 1

stopPropagation would stop the event from bubbling to parent elements, not prevent other click handlers on the same element from firing. So your solution won't work.

You could do it like this for example:

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

});

If you'd have a lot of different types of links you should put the common code in a function and bind the handlers using the differentiating class. These handlers can then call the common code when appropriate.

Answer 2

Have you tried: event.stopImmediatePropagation?

I believe it is what you are looking for:

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