I'm a relative beginner to Jquery so apologies in advance if this is really obvious but would appreciate any advice! :)

The aim of the exercise is to be able to hover over a hyperlink in a dataview table and load the content of one of that page's paragraphs into a div (#notes) on the current page (I may want to load that into a tooltip later but I'll walk before I can run!) and then when I hover off the hyperlink, the loaded content is removed again.

I'm using a combination of .hover and .load to load the paragraph and the first part works fine - hover on and the content from the page appears in the div. However when I hover off, instead of removing the content, it loads it again instead - so instead of an on/off effect, it just spawns more and more of the same content.

I'm not sure it matters but I'm doing this in SharePoint 07 and have put the code in a content editor webpart for simplicity. I've substituted the actual page url for 'myurl' below but in practice this part of the code seems to work ok - it's the mouse out portion which doesn't seem to work.

If what I want is possible, can you see what is wrong with my code?

2. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
3. <script type="text/javascript">
4. 
   
5. $(function() {
6. $("td.ms-vb a").hover(function () {
7. $('<p id="info" />').load('myurl #ctl00_PlaceHolderMain_Content__ControlWrapper_RichHtmlField p', function() {
8. $(this).hide()
9. .appendTo('#notes')
10. .slideDown(50)
11. }
12. , 
13.   function () {
14.     $('#info').remove()
15. });
16. });
17. });
18. </script>