La mia domanda Ajax viene inoltrata una volta, poi due, poi 4 volte e continua a raddoppiare

Question

Ho schede con i pulsanti successivo e precedente in basso, quando carico la pagina ajax carica i dati nella scheda uno, quando faccio clic su successivo il modulo sarà invia una multa, ma se premo precedente dopo aver premuto il tasto successivo, tirerò un'altra ajax per popolare la prima immersione nello stesso modo in cui la stavo caricando, ma quando faccio clic su Avanti per inviare il modulo, la richiesta ajax viene raddoppiata e viene inviata due volte, poi 4 volte 8 ecc, come posso fermare questo da happeing .... mia jquery su una delle mie pagine che è la stessa su tutti:

$(document).on("click",".previous", function() 
{ 
    $.ajax({ 
     url: '<?php echo Config::get('URL'); ?>wizzard/personal_information', 
     type: 'GET', 
     success: function(data){ 
      $('#tab2').html(''); 
      $('#tab2').removeClass('active'); 
      $('.tab_2').removeClass('active'); 
      $('#tab1').html(data); 
      $('#tab1').addClass('active'); 
      $('.tab_1').addClass('active'); 
     } 
    }); 
}); 

$(document).on("click",".next", function() 
{ 
    $('#update_contact_information').on("submit", function() 
    { 

     $.ajax({ 
      url: $(this).attr('action'), 
      type: $(this).attr('method'), 
      dataType: 'json', 
      data: $(this).serialize(), 
      success: function(data){ 
       if(!data.success){ 
        $.notify(data.error,{ 
         className:'error', 
         clickToHide: true, 
         autoHide: true, 
         globalPosition: 'bottom right' 
        }); 

        $.ajax({ 
         url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
         type: 'GET', 
         success: function(data){ 
          $('#tab2').removeClass('active'); 
          $('.tab_2').removeClass('active'); 
          $('#tab2').html(''); 
          $('#tab3').html(data); 
          $('#tab3').addClass('active'); 
          $('.tab_3').addClass('active'); 
         } 
        }); 
       }else{ 
        $.notify(data.success,{ 
         className:'success', 
         clickToHide: true, 
         autoHide: true, 
         globalPosition: 'bottom right' 
        }); 
        $.ajax({ 
         url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
         type: 'GET', 
         success: function(data){ 
          $('#tab2').html(''); 
          $('#tab2').removeClass('active'); 
          $('.tab_2').removeClass('active'); 
          $('#tab3').html(data); 
          $('#tab3').addClass('active'); 
          $('.tab_3').addClass('active'); 
         } 
        }); 
       } 
      } 
     }); 
     return false; 
    }); 

    $('#update_contact_information').trigger('submit'); 
}); 

mie schede:

<div class="panel-body"> 
     <div id="rootwizard"> 
       <div class="navbar"> 
        <div class="navbar-inner"> 
        <div class="container"> 
       <ul class="nav nav-pills"> 
        <li class="active tab_1"><a href="#tab1" data-toggle="tab"><?php echo System::translate("Personal information"); ?></a></li> 
        <li class="tab_2"><a href="#tab2" data-toggle="tab"><?php echo System::translate("Contact information"); ?></a></li> 
        <li class="tab_3"><a href="#tab3" data-toggle="tab"><?php echo System::translate("Employment history"); ?></a></li> 
        <li class="tab_4"><a href="#tab4" data-toggle="tab"><?php echo System::translate("Qualification history"); ?></a></li> 
        <li class="tab_5"><a href="#tab5" data-toggle="tab"><?php echo System::translate("Avatar"); ?></a></li> 
       </ul> 
       </div> 
        </div> 
       </div> 
       <div class="tab-content"> 
        <div class="tab-pane active" id="tab1"> 

        </div> 
        <div class="tab-pane" id="tab2"> 

        </div> 
        <div class="tab-pane" id="tab3"> 

        </div> 
        <div class="tab-pane" id="tab4"> 

        </div> 
        <div class="tab-pane" id="tab5"> 

        </div> 
        <ul class="pager wizard"> 
         <li class="previous"><a href="javascript:;"><?php echo System::translate("Previous"); ?></a></li> 
         <li class="next"><a href="javascript:;"><?php echo System::translate("Next"); ?></a></li> 
        </ul> 
       </div> 
      </div> 

e la chiamata iniziale:

<script> 
$(function(){ 

    $.ajax({ 
     url: '<?php echo Config::get('URL'); ?>wizzard/personal_information', 
     type: 'GET', 
     success: function(data){ 
      $('#tab1').html(data); 
     } 
    }); 
}); 
</script> 

Answer 1

In due precedenti risposte le persone suggeriscono (correttamente) di ristrutturare il codice per evitare di registrare il gestore di eventi all'interno di un altro gestore di eventi. Tuttavia, poiché non accetti queste risposte, suppongo che questo non risponda completamente alla domanda.

Quello che si vuole fare è semplicemente inviare il contenuto del modulo quando si fa clic sul pulsante "Avanti". Allo stesso tempo, questo pulsante non fa parte del modulo, quindi basta cliccarlo per non attivare l'evento "invia". Quindi stai facendo scattare manualmente l'evento.

Ora, ciò che è strano nella descrizione è che le richieste Ajax raddoppiano ad ogni clic. Normalmente con ogni clic dovresti aggiungere solo un'altra richiesta. Vedi il mio violino here, che è la versione semplificata del tuo codice.

var form = $('form'); 

$(document).on('click', '.next', function(){ 
    form.on('submit', function() {//with every click one more handler is registered. Click the "click" link several times to see 
     alert('submit fired'); 
     return false; 
    }); 
    form.trigger('submit') 
}) 

Così, la domanda sorge spontanea: dove si registra il gestore con $(document).on("click",".next", function()? È necessario assicurarsi che questo gestore sia registrato una sola volta. Per questo è possibile inserire alert('registering handler') appena prima che questa riga nel codice verifichi. La sequenza corretta di gestori eventi di registrazione viene visualizzata in questo modified fiddle. Il codice è:

var form = $('form'); 

$(document).on('click', '.next', function(){ 

    form.trigger('submit') 
}) 
form.on('submit', function() {//with every click one more handler is registered. Click the "click" link several times to see 
    alert('submit fired'); 
    return false; 
}); 

Quindi per procedere puoi provare quello che ho suggerito e fammi sapere il risultato?

P.S. Non sono sicuro del motivo per cui è necessario attivare l'invio del modulo. Per la richiesta ajax si sta serializzando il modulo e si annulla l'invio iniziale (si return false;). Quindi consiglierei di evitare di utilizzare gli eventi "submit" e di fare tutto il lavoro nel gestore "click".

UPDATE (dopo ulteriori informazioni è stato aggiunto nel commento qui sotto)

Quindi la seconda parte del problema sta seguendo. Con ogni clic "successivo" stai allegando nuovi listener di eventi e stai sostituendo l'html delle tue schede come questo $('#tab2').html(data); e data contiene non solo markup, ma anche il codice js che viene eseguito quando lo inserisci (btw, I didn ' so che funziona così, è bello). Penso che ciò che si è in attesa di è che una volta rimosso il markup (html), anche i listener di eventi corrispondenti verranno rimossi. Ma in realtà non è il caso. Perché? Poiché si sta delegando vostro evento ascoltando document con il codice che inizia con:

$(document).on("click",".next", function() 

Ecco $(document) è quello che si sta collegando il vostro ascoltatore a. Invece di entrare nei dettagli, ti consiglio vivamente di dare un'occhiata allo this original jquery explanation of event delegation.

Quindi come lo risolvete? Ci sono molti modi diversi. Probabilmente il più semplice (quantità minima di modifica del codice) è quello di rimuovere i listener di eventi prima di fare .html(data).Un altro modo, anche semplice, è scrivere

$('.next').on("click", function(), 

come avete fatto in qualification_history.php. In questo modo stai allegando eventi all'elemento stesso e non al documento. L'unica cosa è che vuoi essere sicuro che ci sia un elemento DOM corrispondente prima che questo codice venga eseguito (quindi potresti inserire il tuo codice dopo il markup).

Answer 2

si sono vincolanti un nuovo evento presenta al modulo ogni volta che si fa clic sul pulsante, è per questo che raddoppia. Rimuovere l'associazione dall'interno del gestore Clickk

$(document).on("click",".next", function() 
{ 

    $('#update_contact_information').trigger('submit'); 
}); 

$(document).on("submit", '#update_contact_information', function() 
{ 

    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     dataType: 'json', 
     data: $(this).serialize(), 
     success: function(data){ 
      if(!data.success){ 
       $.notify(data.error,{ 
        className:'error', 
        clickToHide: true, 
        autoHide: true, 
        globalPosition: 'bottom right' 
       }); 

       $.ajax({ 
        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
        type: 'GET', 
        success: function(data){ 
         $('#tab2').removeClass('active'); 
         $('.tab_2').removeClass('active'); 
         $('#tab2').html(''); 
         $('#tab3').html(data); 
         $('#tab3').addClass('active'); 
         $('.tab_3').addClass('active'); 
        } 
       }); 
      }else{ 
       $.notify(data.success,{ 
        className:'success', 
        clickToHide: true, 
        autoHide: true, 
        globalPosition: 'bottom right' 
       }); 
       $.ajax({ 
        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
        type: 'GET', 
        success: function(data){ 
         $('#tab2').html(''); 
         $('#tab2').removeClass('active'); 
         $('.tab_2').removeClass('active'); 
         $('#tab3').html(data); 
         $('#tab3').addClass('active'); 
         $('.tab_3').addClass('active'); 
        } 
       }); 
      } 
     } 
    }); 
    return false; 
}); 

Answer 3

Senza conoscere il codice HTML completo della pagina in questione, v'è una certa indovinare in questo. Il codice nell'OP non è strutturato correttamente e presenta altri errori logici. Il problema in poche parole è che hai definito un gestore di eventi per aggiungere un gestore di eventi.

Mettendo $('#update_contact_information').on("submit", function(){...}) all'interno della definizione di gestore per $(document).on("click",".next", function(){...}), che stai dicendo:

Ogni volta che clicco sul un pulsante con una classe di next, voglio creare un nuovo gestore di eventi per il mio elemento con l'id di update_contact_information. Quindi, la prima volta che fai clic su next, definisci e quindi attiva submit. La seconda volta che si fa clic su next, esiste già un gestore esistente per l'invio, più si aggiunge un altro.

Poiché non è stato fornito il resto dell'HTML e del JavaScript coinvolti, non è chiaro dove esista il codice. Probabilmente ci sono anche altri problemi.

Vorrei ristrutturare il JavaScript, mettendo tutti i gestori di eventi all'interno della funzione jQuery pronta per la pagina. Ciò consente di definire i gestori di eventi una sola volta e di effettuare comunque la chiamata iniziale per caricare la pagina.

Qualcosa di simile a questo:

$(function() { 
    $(document).on("click", ".previous", function() { 
    $.ajax({ 
     url: '<?php echo Config::get(' 
     URL '); ?>wizzard/personal_information', 
     type: 'GET', 
     success: function(data) { 
     $('#tab2').html(''); 
     $('#tab2').removeClass('active'); 
     $('.tab_2').removeClass('active'); 
     $('#tab1').html(data); 
     $('#tab1').addClass('active'); 
     $('.tab_1').addClass('active'); 
     } 
    }); 
    }); 

    $('#update_contact_information').on("submit", function() { 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     dataType: 'json', 
     data: $(this).serialize(), 
     success: function(data) { 
     if (!data.success) { 
      $.notify(data.error, { 
      className: 'error', 
      clickToHide: true, 
      autoHide: true, 
      globalPosition: 'bottom right' 
      }); 

      $.ajax({ 
      url: '<?php echo Config::get(' 
      URL '); ?>wizzard/employment_history', 
      type: 'GET', 
      success: function(data) { 
       $('#tab2').removeClass('active'); 
       $('.tab_2').removeClass('active'); 
       $('#tab2').html(''); 
       $('#tab3').html(data); 
       $('#tab3').addClass('active'); 
       $('.tab_3').addClass('active'); 
      } 
      }); 
     } else { 
      $.notify(data.success, { 
      className: 'success', 
      clickToHide: true, 
      autoHide: true, 
      globalPosition: 'bottom right' 
      }); 
      $.ajax({ 
      url: '<?php echo Config::get(' 
      URL '); ?>wizzard/employment_history', 
      type: 'GET', 
      success: function(data) { 
       $('#tab2').html(''); 
       $('#tab2').removeClass('active'); 
       $('.tab_2').removeClass('active'); 
       $('#tab3').html(data); 
       $('#tab3').addClass('active'); 
       $('.tab_3').addClass('active'); 
      } 
      }); 
     } 
     } 
    }); 
    return false; 
    }); 

    $(document).on("click", ".next", function() { 
    $('#update_contact_information').trigger('submit'); 
    }); 

    $.ajax({ 
    url: '<?php echo Config::get(' 
    URL '); ?>wizzard/personal_information', 
    type: 'GET', 
    success: function(data) { 
     $('#tab1').html(data); 
    } 
    }); 
}); 

A seconda del resto del codice HTML e JavaScript per la tua pagina, questo può o non può funzionare come è per voi. Sto fornendo un violino che dimostra qualcosa di simile in azione. Non è un duplicato esatto del post originale, perché la logica dell'esempio non funziona.Dovrebbe essere un punto di partenza sufficiente per:

1. risolvere il tuo problema esistente di più associazioni di eventi
2. Dare un posto migliore per iniziare per fissare i problemi di logica nei tuoi esempi originali

Here is the fiddle

Answer 4

Suppongo che l'id id elemento sia #update_contact_information non esiste all'inizio. Si desidera associare un evento su .next cliccato. Quindi, ti suggerisco di utilizzare $.delegate per associare l'evento prima degli spettacoli di elementi. maggiori informazioni vedi .delegate().

ad es.

$(document).delegate('#update_contact_information','submit', function(){ 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     dataType: 'json', 
     data: $(this).serialize(), 
     success: function(data){ 
      if(!data.success){ 
       $.notify(data.error,{ 
        className:'error', 
        clickToHide: true, 
        autoHide: true, 
        globalPosition: 'bottom right' 
       }); 

       $.ajax({ 
        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
        type: 'GET', 
        success: function(data){ 
         $('#tab2').removeClass('active'); 
         $('.tab_2').removeClass('active'); 
         $('#tab2').html(''); 
         $('#tab3').html(data); 
         $('#tab3').addClass('active'); 
         $('.tab_3').addClass('active'); 
        } 
       }); 
      }else{ 
       $.notify(data.success,{ 
        className:'success', 
        clickToHide: true, 
        autoHide: true, 
        globalPosition: 'bottom right' 
       }); 
       $.ajax({ 
        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
        type: 'GET', 
        success: function(data){ 
         $('#tab2').html(''); 
         $('#tab2').removeClass('active'); 
         $('.tab_2').removeClass('active'); 
         $('#tab3').html(data); 
         $('#tab3').addClass('active'); 
         $('.tab_3').addClass('active'); 
        } 
       }); 
      } 
     } 
    }); 
    return false; 
}); 

Answer 5

Come per il mio commento

$(document).on("click",".previous", function(){ 
    $.ajax({ 
     url: '<?php echo Config::get('URL'); ?>wizzard/personal_information', 
     type: 'GET', 
     success: function(data){ 
      $('#tab2').html(''); 
      $('#tab2').removeClass('active'); 
      $('.tab_2').removeClass('active'); 
      $('#tab1').html(data); 
      $('#tab1').addClass('active'); 
      $('.tab_1').addClass('active'); 
     } 
    }); 
}); 

$(document).on("click",".next", function(){ 
    /* Submit binding code from here moved just after this block. */ 
    $('#update_contact_information').trigger('submit'); 
}); 

/* submit binding code from above block */ 
$('#update_contact_information').on("submit", function(){ 
    $.ajax({ 
     url: $(this).attr('action'), 
     type: $(this).attr('method'), 
     dataType: 'json', 
     data: $(this).serialize(), 
     success: function(data){ 
      if(!data.success){ 
       $.notify(data.error,{ 
        className:'error', 
        clickToHide: true, 
        autoHide: true, 
        globalPosition: 'bottom right' 
       }); 

       $.ajax({ 
        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
        type: 'GET', 
        success: function(data){ 
         $('#tab2').removeClass('active'); 
         $('.tab_2').removeClass('active'); 
         $('#tab2').html(''); 
         $('#tab3').html(data); 
         $('#tab3').addClass('active'); 
         $('.tab_3').addClass('active'); 
        } 
       }); 
      }else{ 
       $.notify(data.success,{ 
        className:'success', 
        clickToHide: true, 
        autoHide: true, 
        globalPosition: 'bottom right' 
       }); 
       $.ajax({ 
        url: '<?php echo Config::get('URL'); ?>wizzard/employment_history', 
        type: 'GET', 
        success: function(data){ 
         $('#tab2').html(''); 
         $('#tab2').removeClass('active'); 
         $('.tab_2').removeClass('active'); 
         $('#tab3').html(data); 
         $('#tab3').addClass('active'); 
         $('.tab_3').addClass('active'); 
        } 
       }); 
      } 
     } 
    }); 
    return false; 
}); 

Answer 6

Questo dovrebbe aiuto con l'ordine e la logica dei vostri eventi

//bind only when the doc has rendered... 
$(document).ready(function() { 

    //bind click to and element with class previous 
    $(".previous").on("click", function() 
    { 
     //... previous code 
     alert("test me ;-)"); 
    } 

    //bind click to and element with class next 
    $(".next").on("click", function() 
    { 
     //... next code. 
     alert("test me ;-)"); 
    } 

}