防止多個點擊事件觸發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'); 
      } 
     }); 
    }); 

}); 

如果你有很多不同類型的鏈接，你應該把公共代碼的功能，並綁定使用差分類的處理程序。這些處理程序可以在適當的時候調用通用代碼。