的jQuery避免多次請求的preventDefault

Question

我需要一種方法來防止多次提交：

$("#myDiv").click(function(e) { 
    e.preventDefault(); 
    console.log('open'); 

    // submit the form  
    $('#myDiv #myInput').click(function(e){ 
     e.preventDefault(); 
     /* ajax call here */ 
     console.log('clicked'); 
    }); 

}); 

所以，如果當我點擊#myDiv正在發送X次點擊子功能。

例如。如果點擊3次#myDiv然後點擊#myInput會發送3次表格，如果再按一次就會發送6.

任何想法如何解決？

Answer 1

好像你被多次結合的Click事件處理程序$('#myDiv #myInput') ..

您應該移動$('#myDiv #myInput').click(function(e){的$("#myDiv").click(function(e) {單擊處理外部或使用.one(。請注意，在這兩種情況下，行爲都是不同的。請使用event.stopPropagation();來停止事件冒泡。

請根據您的要求嘗試以下代碼。以下第1項和第2項工作方式不同，請理解代碼並按照您的要求執行。

1. 移動#myInput外單擊

   $("#myDiv").click(function(e) { 
   e.preventDefault(); 
   e.stopPropagation(); 
   console.log('open'); 
   }); 
   
   // submit the form  
   $('#myDiv #myInput').click(function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       /* ajax call here */ 
       console.log('clicked'); 
   }); 
   

2. 事件請注意#myInput點擊處理程序將被執行一次。

   $("#myDiv").click(function(e) { 
       e.preventDefault(); 
       e.stopPropagation(); 
       console.log('open'); 
   
       // submit the form  
       $('#myDiv #myInput').one(function(e){ 
       e.preventDefault(); 
       e.stopPropagation(); 
       /* ajax call here */ 
       console.log('clicked'); 
       }); 
   });