title: event delegation with jQuery 1.3.2
body: <p>I'm stuck using jQuery 1.3.2 at the moment and I'm just beginning to understand event delegation in general.  But I can't seem to get any sort of event delegation to work on this code. I have a ul with a class 'chat' which when hovering over one of it's li's should create a new span which then slides out, then slides back in when the mouse leaves the li. </p>
  
  <p>This code works, but I want to use event delegation:</p>
  
  <pre><code>$('ul.chat li').hover(
      function() {
          $(this).append($('&lt;span class="join"&gt;Join Conversation&lt;/span&gt;'));
          setTimeout(function() {
              $('.join').animate({'width': '150px'}, 400);
          },500);
      },
      function() {
          $('.join').animate({'width': '0px'}, 200, function(){
              $(this).remove();                                             
          }); 
      }
  );
  </code></pre>
  
  <p>Can someone show me how to achieve the same result, but with event delegation?
  Thanks.</p>