Q:

Slide a div down upon clicking a row from the table

What I'm trying to achieve is that a div should be slide down just below the row upon clicking the row.  I does works for the first time when the data gets generated via AJAX.  but it does not works when I'm generating data after the first time, though the event is triggered but $('.test').slideUp(0) $(this).append(($('.test')).slideDown('slow'));  does not works after the first time.  Nor any error is popped .  
I want that a div should slide down just below the row which is clicked.  It does works but only for the 1st time when I generate the data via Ajax.  Upon generating the table after the 1st time, the div does not slides down.  
For eg:- When I click an li item a table will appear.  Upon clicking on any of the rows, a div will appear saying You slide down a row with content xyz.  but when I click an item again from the list, and then the row from the corresponding table, the div doesn't shows up. 
See http://jsfiddle.net/fVz6D/5/

A:

When you're doing $(this).append(($('.test')) you're removing it from the DOM and appending to to the tr that is being clicked.  But when you click on the li you're loading new content to the table and thus $('.test') is now no longer available. 
To solve this, one easy fix is to append the .test div back to the body element when you click on the li:
$('body').append($('.test').slideUp(0));
Fiddle: http://jsfiddle.net/fVz6D/9/

