Problem with Jquery append on hover appending twice?

Question

Okay, so I'm trying to achieve something like you have in the back end of Wordpress where when you hover over a row in the the table of posts, it displays the edit, trash and preview links.

However, when I try this, it appends the links twice which is a bit of a problem. I read that the hover fires functions off twice on hover in chrome, but tried it in opera and the same error occurred so I don't think that's the problem.

Here is a demo of it

Link

And here is the code

// Table row hover displays links

$('table.tablesorter tbody tr').hover( 
     function() {  // mouseover 
          $(this).children('td:nth-child(2)').append('<p class="links"><a>Edit</a><a>Preview</a><a>Delete</a></p>'); 
     }, 
     function() {  // mouseout 
          $(this).children('td:nth-child(2)').find('p.links').remove(); 
     } 
   );

Can you see why it adds the links twice instead of once?

Answer 1

It doesn't answer your question but you could hide your <p> when the mouse is out and show it when the mouse is over.

Answer 2

Creating elements on mouseover/mouseout is much more work on the browser then having those elements created (already in the markup with display:none; ) and showing/hiding them. your mouseover and mouseout are probably BOTH firing and it can't find the element to remove and continues to add it..

$('table.tablesorter tbody tr').hover( 
     function() {  // mouseover 
          $(this).find('.myControls').fadeIn(); 
     }, 
     function() {  // mouseout 
          $(this).find('.myControls').fadeOut(); 
     } 
   );

Answer 3

You have included js/custom.jquery.js twice. Once in the head and once after body is closed. The same with jquery