Question

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

http://jsfiddle.net/7HZvS/

为什么面板滑动后警报功能不会被触发？单击标有“swiperee”的灰色框，然后观看灰色面板滑入。然后单击标有“swiperee2”的灰色面板。没有。应该引起警报。：（

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

感谢。

修改加布在下面的回答并不完全正确恕我直言。首先，他的代码使用.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()调用显然会在解除事件处理程序的位置进行一些清理。

jquery.on（）事件处理程序不会动态添加$元素

1 个答案: