jquery.on() event handlers not firing on dynamically added $element - dom

Question

To illustrate my problem, I created a jsfiddle page here
http://jsfiddle.net/7HZvS/
Why does the alert function not get fired after the panel slides? Click on the grey box labeled "swiperee" and watch a grey panel slide in. Then click on the one labeled "swiperee2". Nothing. Should cause an alert. :(
Since the first panel slides when you click on the "swiperee" grey button, I see no reason why the second grey button "swiperee2" doesn't handle its .on() event - its generated identically.
Thanks.
EDIT:
Gabe's answer below is not exactly right IMHO. Firstly, his code is using the .on() event list not events-map but that's just syntax. his point is that the events should be delegated because I'm dynamically adding elements.
I'm actually not sure that is really the right thinking, because I have all elements in fact already loaded, they're just not displayed - there is no ajax here. All that happens is that elements move around the DOM hierarchy.
below is the sample code from the jsFiddle above, as requested.
$(function(){
var g = {
func : {
swipeLeft : function($el)
{
$RIGHT = $('<div id="right">')
.appendTo('body')
.addClass('scrollable hwaccel')
.css({
'position' : 'absolute',
'z-index' : '2',
'top' : '0px',
'left' : '640px',
'width' : '640px',
'height' : '960px',
'border' : '1px solid #ccf'
})
;
$el.appendTo($RIGHT);
$('#right, #main').animate(
{
left : '-=640px'
},
500,
function(){
$MAIN.empty();
$el.appendTo($MAIN);
$MAIN.css('left','0px');
$RIGHT.remove();
}
);
}
}
};
$MAIN = $('<div id="main">')
.appendTo('body')
.addClass('scrollable hwaccel')
.css({
'position' : 'absolute',
'z-index' : '1',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'height' : '960px',
'border' : '1px solid #009'
})
;
$start = $('<div id="start">')
.appendTo($MAIN)
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'border' : '1px solid #900'
})
.html(
'hello<br/>456'
)
.append(
$('<div id="swiperee">')
.css({
'position' : 'absolute',
'top' : '10px',
'left' : '10px',
'width' : '100px',
'height' : '40px',
'background': '#ccc',
'cursor' : 'pointer'
})
.html('swiperee')
.on({
click : function(){
g.func.swipeLeft($next);
}
})
)
;
$next = $('<div id="next">')
.css({
'position' : 'absolute',
'top' : '0px',
'left' : '0px',
'width' : '640px',
'height' : '960px',
'background': '#ddd'
})
.html(
'sdfjkgh sdklfjgh sdklfjgh skldfj ghskldjgh'
)
.append(
$('<div id="swiperee2">')
.css({
'position' : 'absolute',
'top' : '10px',
'left' : '10px',
'width' : '100px',
'height' : '40px',
'background': '#ccc',
'cursor' : 'pointer'
})
.html('swiperee2')
.on({
click : function(){
alert('sdf');// WHY DOES NOT CALL??
}
})
)
;
});
​

Answer 1

The problem is the line $MAIN.empty() in the animate callback. Remove that and it works.
The .empty() call apparently does some cleanup where it unbinds event handlers.