[Starholdest]

Hey guys

Here's the scenario:

Starts out as this in the HTML:

<td>
<div class="info">This is a test</div>
</td>

I'm using jQuery to try and do some inline editing. So I use this code I made:

$(".info").click(function() {
var original = $(this).html();

var textarea = '<div><textarea name="comments" cols="60" rows="3">' + $(this).html() + '</textarea>';
var button = '<input type="button" value="Save" class="saveButton" /> OR <input type="button" value="Cancel" class="cancelButton" /></div>';

$(this).after(textarea+button).remove();

$('.cancelButton').click(function() {
$(this).parent().parent().html('<div class="info">' + original + '</div>');
$(this).parent().remove();
});


});

Now, everything works good. The only problem is that after I have clicked the cancel button and the code returns to it's original state (aka see first code I posted above), clicking it again DOES NOT DO ANYTHING.

It's as if the javascript is not noticing the click actions on the 'info' class anymore after doing it once.

Here's a gif I made to show the problem:



And what the code looks like after I click the cancel button and nothing happens:



Help??

Thanks guys,
Elliott