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\').         


        

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