Prevenir eventos de clics múltiples activando JQuery

Question

Aquí está el escenario, mi contenido se carga de forma asincrónica en función de una clase. Entonces, 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 bien, en un caso, quiero mostrar una advertencia al usuario a confirm que quieren cargar la página y suelta todos sus cambios, así que he escrito 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, y e.preventDefault()e.stopPropagation(); pero no importa cuál sea el primer método que se active siempre? ¿Cómo puedo evitar que se active el evento de clic adicional? ¿Es esto una 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 busca:

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 el caso de burbujeo a los elementos primarios, no impide que otras personas que manipulan clic en el mismo elemento se dispare. Entonces tu solución no funcionará

Usted puede hacerlo de esta manera, 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 desea tener una gran cantidad de diferentes tipos de enlaces que debe poner el código común en una función y se unen los controladores utilizando la clase de diferenciación. Estos manejadores pueden llamar al código común cuando sea apropiado.