Buongiorno a tutti, sto facendo delle prove con jquery, ho il seguente html:
codice HTML:
<div id="fascia1">            
     <div class="container">                
          <nav></nav>                
          <img id="logo" src="img/logo.png" height="50px" width="50px">                
          <p id="intestazione">Cami Service</p>                
          <div class="clear"></div>            
     </div>        
</div>
<div id="fascia2">
     <div class="container">                
          <div id="immagine">                    
               <h1>OTTIENI IL MASSIMO DAL TUO IMPIANTO</h1>                
          </div>            
     </div>        
</div>
e il seguente javascript:

codice:
<script>
$(document).ready(function(){

   jQuery('a').on('click', function(e) {
      e.preventDefault();
      jQuery('a.selezionato').removeClass('selezionato');
      jQuery(this).addClass('selezionato');
    });                


   $.ajax({
     beforeSend:function(xhr){
       if (xhr.overrideMimeType) {
          xhr.overrideMimeType("application/json");
        }
      }
    });

   $.getJSON('json/data.json')
    .done( function(data){
     vari=0;
     $.each(data.events, function(){
       $('nav').append('<a href="#">'+i+'</a>');
       if (i==0) {
         $('a').addClass('selezionato');
        };
       i++;
      });                    
    });


  });  
</script>
quello che non capisco è perchè l'evento jQuery('a').on('click', function(e) {
che da solo funzionava e faceva il suo dovere, aggiungendo il resto di codice non funziona più.

PS naturalmente quando nel codice js c'era solo l'evento i tre <a> del <nav> li avevo aggiunti nel codice html.

grazie già da ora delle spiegazioni