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