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') ..

Вы должны либо переместить $('#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'); 
       }); 
   });