[jQuery] Manipulating content generated after $(document).ready

[jQuery] Manipulating content generated after $(document).ready


I'm wondering if it's possible to use jQuery to manipulate content
that has been generated by jQuery after the page has loaded.
Here's what I'm trying to accomplish: The user clicks a span in a long
block of text, and that span is cloned, wrapped in list tags, and
appended to a ul at the end of the document:
//Add span to confirmation div at end of document
$('span.data').click(function(){
var confirmList = $('div#confirmSelections ul');
$
(this).clone().appendTo(confirmList).removeClass("highlight").wrap("<li></
li>");
})
So far, so good. However, I'd like the user to also be able to click
one of the cloned spans at the end and have that remove it from the
list, which I figured ought to look something like this:
//Hide span when clicked
$('div#confirmSelections ul li span.data').click(function(){
$(this).hide();
});
//FAIL
I've had no trouble manipulating the elements that are there at $
(document).ready (e.g. the ul and the div containing it), but I can't
do anything with the lis or spans that are generated by jQuery. What
am I missing?
Any help with this would be greatly appreciated. Thanks.