jquery - 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

$('#myDiv #myInput')似乎您正在为..多次绑定 click 事件处理程序

您应该将$('#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');
      });
   });