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

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.