jquery.on() 事件处理程序不会在动态添加的 $element 上触发

Question

为了说明我的问题，我创建了一个 jsfiddle 页面here

http://jsfiddle.net/7HZvS/

为什么在面板滑动后没有触发警报功能？单击标有“swiperee”的灰色框并观看一个灰色面板滑入。然后单击标有“swiperee2”的那个。没有。应该引起警报。 :(

由于当您单击“swiperee”灰色按钮时第一个面板会滑动，我看不出为什么第二个灰色按钮“swiperee2”不处理其 .on() 事件 - 它的生成方式相同。

谢谢。

编辑： Gabe 在下面的回答并不完全正确，恕我直言。首先，他的代码使用 .on() 事件列表而不是事件映射，但这只是语法。他的观点是事件应该委托，因为我是动态添加元素的。

我实际上不确定这是否真的是正确的想法，因为我实际上已经加载了所有元素，它们只是没有显示 - 这里没有 ajax。所发生的只是元素在 DOM 层次结构中移动。

根据要求，下面是上面 jsFiddle 的示例代码。

$(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

问题在于动画回调中的$MAIN.empty() 行。删除它，它的工作原理。

.empty() 调用显然做了一些清理，它解除了事件处理程序的绑定。