Issues with cloning hover event

Issues with cloning hover event

I'm running into an issue with cloning a jQuery object with a hover event. For each clone of an item, the hover events are stacked rather than just duplicated.

  1. <html
  2. <head>
  3.     <title>jQuery Clone Hover Issue</title>
  4.     <script src='jquery.js' type='text/javascript'></script>
  5.     <script type='text/javascript'>
  6.     $(document).ready(function(){
  7.         var box1 = $('div');
  8.         box1
  9.             .click(function(){
  10.                 $(this).append('Click');
  11.             })
  12.             .hover(function(){
  13.                 $(this).append('Hover In');
  14.             }, function(){
  15.                 $(this).append('Hover Out');
  16.             });
  17.         var box2 = box1.clone(true);
  18.         box2.text('Box 2').appendTo($('body'));
  19.         var box3 = box2.clone(true);
  20.         box3.text('Box 3').appendTo($('body'));
  21.     });
  22.     </script>
  23. </head>
  24. <body>
  25.     <div style='border: 1px solid #000;'>
  26.         Box 1
  27.     </div>
  28. </body>
  29. </html>
This example will print out "Hover In" for Box 1, "Hover InHover In" for Box 2, etc. But the click function will only print out "Click" once. I expected the behavior for the hover event to work the same as the click event. This behavior doesn't seem like it should work that way, but correct me if I'm wrong.

I'm using jQuery 1.4.2

Thanks in advance.

P.S. - I tried separating to mouseenter and mouseleave but the same issue occurs.