Impedire l'attivazione di più eventi click JQuery

Question

Ecco lo scenario, il mio contenuto viene caricato in modo asincrono in base a una classe. Quindi, se ho un legame con la classe ajaxLink spara come di seguito:

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

    }); 

tutto molto bello. Ora, in un caso voglio visualizzare un messaggio di avviso per l'utente di confirm che vogliono caricare la pagina e sciolto tutte le loro modifiche in modo ho scritto questo:

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

ora ho provato return false, e.preventDefault() e e.stopPropagation(); ma non importa quale sia il primo metodo che viene sempre attivato? Come posso impedire l'attivazione dell'evento di clic in più? È una cosa dell'ordine degli eventi?

Non vedo come questo sia rilevante, ma il mio HTML è:

<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

Hai provato: event.stopImmediatePropagation?

Credo che sia quello che stai cercando:

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 avrebbe impedito l'evento da bubbling a elementi padre, non impedire ad altri gestori di clic sullo stesso elemento di sparare. Quindi la tua soluzione non funzionerà.

Si potrebbe fare in questo modo, ad esempio:

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

}); 

Se si avrebbe un sacco di diversi tipi di link si dovrebbe mettere il codice comune in una funzione e si legano i gestori che utilizzano la classe di differenziazione. Questi gestori possono quindi chiamare il codice comune quando appropriato.