title: Ajax call duplicated each time
body: <p>I have a page with a form. The form is dinamically loaded with jquery.load in document.ready loop.</p>
  
  <pre><code>$('#storico').load('bp/storico.php?az=&lt;?php echo $id; ?&gt;');
  </code></pre>
  
  <p>I have then created a delegated event to handle form submission:</p>
  
  <pre><code>$(document).on('click','#update',function(e){
  e.preventDefault();
  var att_stor = $('#attivo_storico').val();
  var pass_stor = $('#passivo_storico').val();
  var az = &lt;?php echo $id; ?&gt;;
  $.ajax({
          type: "POST",
          url: "bp/storico1.php",
          data: {attivo_storico: att_stor, passivo_storico: pass_stor, azione: az},
          success: function(data){
      data1=data.split("|");
      if(data1[0].trim() == "Successo"){ 
          $("#storico").empty().html('&lt;center&gt;&lt;p class="success"&gt;'+data1[1]+'&lt;/p&gt;&lt;/center&gt;').animate({opacity:1}, 'slow');
      }else if(data1[0].trim() == "Errore"){
          $("#storico").empty().html('&lt;center&gt;&lt;p class="err"&gt;'+data1[1]+'&lt;/p&gt;&lt;/center&gt;').animate({opacity:1}, 'slow');    
      }
      },
          complete: setTimeout(function(){$('.container').load('bp/businessplan.php?id=&lt;?php echo $id; ?&gt;');},3000)
      });
  });
  </code></pre>
  
  <p>The ajax call works like a charm and do the following:</p>
  
  <ol>
  <li>submit the form and update db (no issues);</li>
  <li>update the div containing the form with a confirmation message (no issue)</li>
  <li>reload the container div to update the whole page with the new data (used elsewhere in the page)</li>
  </ol>
  
  <p>The first loop works flawlessy. The second time the call is executed twice, the third is four times, then eight times. If i load something else in container and then go back to this page the execution starts again from one. 
  This issue doesn't affect how the scripts work but I'd like to understand why it duplicates the calls (as Firebug shows me)</p>
  
  <p>Thanks in advance!</p>