jQuery Evita più richieste PreventDefault

Question

Ho bisogno di un modo per prevenire più invio:

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

});

Quindi se quando faccio clic #myDiv sta inviando x tempi, fare clic sulla funzione figlio.

per esempio. Se fai clic su 3 volte #myDiv e poi fai clic #myInput Invierà 3 volte il modulo e se si preme di nuovo invierà 6.

Qualche idea su come aggiustarlo?

Answer 1

Sembra che tu stia vincendo il gestore eventi click più volte per $('#myDiv #myInput')..

Dovresti spostare il $('#myDiv #myInput').click(function(e){ al di fuori del gestore click di $("#myDiv").click(function(e) { o usare .one(. Si noti che in entrambi i casi il comportamento è diverso.

Anche l'uso dovrebbe usare event.stopPropagation (); per fermare l'evento gorgogliante.

Prova sotto il codice secondo il tuo requisito. Gli elementi seguenti 1. e 2. Funzionano in modo diverso, quindi si prega di comprendere il codice e implementare secondo il tuo requisito.

1. Spostamento #myinput fai clic sull'evento all'esterno

   $("#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. Si prega di notare che il gestore dei clic per #MyInput verrà eseguito una volta.

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