如何在此代碼中停止事件冒泡？

Question

$('#div1').on('click', '#otherDiv1', function(event){  
     //Show popup 
     $('#popupDiv').bPopup({ 
      modalClose: false, 
      follow: [false, false], 
      closeClass: 'close' 
     });    
     event.stopPropagation(); 

     $('#div2').on('click', '#otherDiv2', function (event) { 

      // here is ajax request   

      // close popup   
      $('#popupDiv').bPopup().close(); 
      event.stopPropagation(); 
     }); 

    } 

多次點擊otherDiv2調用ajax函數，該如何阻止？當我在otherDviv1點擊彈出的打開，裏面是Ajax請求按鈕

HTML代碼

<div id="div2"> 

<div id="div1"><div id="otherDiv1">Click</div></div> 

    <div id="popupDiv"><div class="close">X</div> 
     <input id="otherDiv2" name="otherDiv2" type="submit" value="Click" /> 
    </div> 
</div> 

popupDiv動態

創建。當我點擊按鈕時，一個請求被調用並彈出關閉。如果我再次點擊otherDiv1，並且按鈕兩次調用請求，依此類推。

由於

Answer 1

它沒有必要在另一個click結合第二種click。您的代碼在每個click到#otherDiv1之間綁定click到#otherDiv2。以下過程不需要stopPropagation()。

$('#div1').on('click', '#otherDiv1', function(event) { 
    //Show popup 
    $('#popupDiv').bPopup({ 
     modalClose: false, 
     follow: [false, false], 
     closeClass: 'close' 
    }); 
}); 

$('#div2').on('click', '#otherDiv2', function(event) { 

    // here is ajax request   
    // close popup   
    $('#popupDiv').bPopup().close(); 
}); 

但如果你需要到另一個事件中的綁定事件則首先從#otherDiv2取消綁定事件，然後再次綁定。

$('#div1').on('click', '#otherDiv1', function(event) { 
    //Show popup 
    $('#popupDiv').bPopup({ 
     modalClose: false, 
     follow: [false, false], 
     closeClass: 'close' 
    }); 

    $('#div2').off('click').on('click', '#otherDiv2', function(event) { 

     // here is ajax request   
     // close popup   
     $('#popupDiv').bPopup().close(); 
    }); 
}); 

Answer 2

如果您使用jQuery的相當多的新版本，每一個Ajax請求返回Deferred對象，你可以在單擊處理程序的外部範圍存儲和分析，以取消現有的請求，或者只是不啓動新的。

此外還有一個概念叫做節流，並有plugins爲jquery它爲你做。

Answer 3

我想你可以使用

event.stopImmediatePropagation() 

停止冒泡。

http://api.jquery.com/event.stopImmediatePropagation/