防止多个点击事件触发JQuery

Question

这里是场景，我的内容是基于一个类异步加载的。所以，如果我有这个类的链接ajaxLink它触发如下：

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

    }); 

所有可爱。现在，在一种情况下我想，所以我已经写了显示一个警告用户confirm，他们要加载的页面并失去其所有的变化是：

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

现在我已经试过return false，e.preventDefault()和e.stopPropagation();但无论第一种方法总是被解雇？我怎样才能防止额外的点击事件发射？这是事件顺序吗？

看不出这是相关的，但我的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

你试过了吗：event.stopImmediatePropagation？

我相信这是你在找什么：

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会冒泡到父元素停止的情况下，不能防止在相同的元素触发其它单击处理。所以你的解决方案将无法工作。

你可以做这样的例子：

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

}); 

如果你有很多不同类型的链接，你应该把公共代码的功能，并绑定使用差分类的处理程序。这些处理程序可以在适当的时候调用通用代码。