0

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

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??
                }
            })
        )
    ;
});

​</p>

4

1 回答 1

1

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

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

于 2012-09-04T23:42:04.437 回答