bootstrap - Prevenir múltiples eventos de clics disparando JQuery

jquery confirm cdn

Question

Aquí está el escenario, mi contenido se carga de forma asíncrona según una clase. Así que si tengo un enlace con la clase ajaxLink se activa de la siguiente manera:

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

    });

Todo encantador Ahora, en una instancia, quiero mostrar una advertencia al usuario para confirm que desea cargar la página y perder todos sus cambios, así que escribí esto:

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

ahora he intentado return false , e.preventDefault() and e.stopPropagation(); Pero no importa cuál sea el primer método siempre se dispara? ¿Cómo puedo evitar que se dispare el evento de clic extra? ¿Es esto una cuestión de orden de eventos?

No veo cómo esto es relevante pero mi HTML es:

<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

¿Has probado: event.stopImmediatePropagation ?

Creo que es lo que buscas:

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

Answer 2

stopPropagation detendría la stopPropagation del evento a los elementos principales, no evitaría que se stopPropagation otros controladores de clic en el mismo elemento. Así que tu solución no funcionará.

Podrías hacerlo así por ejemplo:

$(''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 tuvieras muchos tipos diferentes de enlaces, deberías poner el código común en una función y vincular los manejadores usando la clase diferenciadora. Estos manejadores pueden entonces llamar al código común cuando sea apropiado.