jQuery Evite múltiples solicitudes preventelas

Question

Necesito una forma de evitar múltiples envíos:

$("#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');
    });

});

Entonces, si cuando hago clic #myDiv está enviando x veces haga clic en la función infantil.

p.ej. Si hace clic 3 veces #myDiv y luego haga clic #myInput Enviará 3 veces el formulario, y si presiona nuevamente, enviará 6.

¿Alguna idea para solucionarlo?

Answer 1

Parece que está vinculando el controlador de eventos de clic vinculante varias veces para $('#myDiv #myInput')..

Deberías mover el $('#myDiv #myInput').click(function(e){ fuera del controlador de clics de $("#myDiv").click(function(e) { o usar .one(. Tenga en cuenta que en ambos casos el comportamiento es diferente.

También usar debería usar event.stopPropagation (); para dejar de burbujear de eventos.

Pruebe el siguiente código según su requisito. Los siguientes elementos 1. y 2. funcionan de manera diferente, así que comprenda el código e implementen según sus requisitos.

1. Mover #MyInput Haga clic en el evento afuera

   $("#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. Tenga en cuenta que el controlador de clic para #MyInput se ejecutará una vez.

   $("#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');
      });
   });