[solved]cant add event handler to dynamicly added li a

[solved]cant add event handler to dynamicly added li a

Hey all, So im trying to attach an event to a list item that I've added by clicking another button but no matter what I do I cant get the event handler to register. I'm sure there is a simple fix to this problem but I've read everything I could find about rebinding and I'm still confused as to why this wont work. It works fine if I add the link in the HTML.

page is here - its just for learning so I haven't fixed css for all browsers/monitors etc
http://patrick.horsley.08wdwe07.natcoll ... page.html#

any Ideas would be greatly appreciated!


$(function(){
   
   $('#container').fadeIn(1000); //fade in transition
   
   
   $('li a#exit').click(function() { //This is the problematic funtion that I am trying to bind, it has had many forms this is just the latest that like all the others works fine but doesn't bind
   //function exitpage() {
      
         $('#container').animate({'top':'1000px'},800, function() {
            window.location = 'page3.html';   
         });
      });
   //}
   
   
   
   
   $(function(){//intro - lifts click me link etc
   $('#controller').addClass('lift')
         .html('<a href="#">Wait...</a>')
         .animate({'top' : '-500px'},3000)
         .animate({'top' : '-480px'},'slow')
         .animate({'top' : '-500px'},'slow', 
               
            function(){
               $(this).html('<a href="#">Click Me!</a>');
            });
   });

   
   $('#controller').click(function(){//add a UL and hide the current controllin link
      $('<div id="addRemove"><p id="addlist"><a href="#">Add</a></p><p id="removelist"><a href="#">Remove</a></p><div id="list1"><ul><li class=\'works\'>Touch Me!</li></ul></div></div>').appendTo('#container')
      $(this).fadeOut('slow');
      
         setTimeout(function(){
            $('#controller').remove();
         },1000);   
      
   
      var i=0;
      
      $('#addlist').click(function(){//define the list item to be added
         switch(i){
            case 0:
               var addtext = $("<li>one</li>").css('font-size','.4em')
               break;
            case 1:
               var addtext = $("<li>two</li>").css('font-size','.8em')
               break;
            case 2:
               var addtext = $("<li>three</li>").css('font-size','1em')
               break;
            case 3:
               var addtext = $("<li>four</li>").css('font-size','1.3em')
               break;
            case 4:
               var addtext = $("<li><a id='exit' href='#'>Lets Go!</a></li>").css('font-size','1.6em');//this is the one im trying to bind to
               
               break;
            case 5:
               i=5
               return;
         
         }
         $(addtext).appendTo("#list1 ul")//add the list item to the ul
                           .hide()
                           .fadeIn(500);
                           i++;
      });
   
      $('#removelist').click(function(){//remove the last list item

         if(i>0)
         {
            $("#list1 li:last").fadeOut(200,function() {
                  $("#list1 li:last").remove();
               });
            i--;
         }
         else{i=0;}
      });
      
      $('#list1 li').hover(function(){//random animation
         $(this)   .unbind()
               .animate({"left":"50"})
               .animate({'left':'-50'})
               .animate({'left':'25'})
               .animate({'left':'-25'})
               .animate({'left':'15'})
               .animate({'left':'-10'})
               .animate({'left':'5'})
               .animate({'opacity':0},'medium')
               .animate({'left':'0'}, function() {
               $(this).remove();
               $('#addlist,#removelist').fadeIn('slow');
         });
      });
   });
   
});//ends onready function