0

私の問題を説明するために、ここにjsfiddleページを作成しました

http://jsfiddle.net/7HZvS/

パネルがスライドした後にアラート機能が起動しないのはなぜですか? 「swiperee」というラベルの付いたグレーのボックスをクリックして、グレーのパネルがスライドインするのを確認します。次に、「swiperee2」というラベルの付いたボックスをクリックします。何もない。アラートを発生させる必要があります。:(

「swiperee」の灰色のボタンをクリックすると最初のパネルがスライドするため、2 番目の灰色のボタン「swiperee2」が .on() イベントを処理しない理由はわかりません。同じように生成されます。

ありがとう。

編集： 以下のゲイブの答えは、私見では正確ではありません。まず、彼のコードは events-map ではなく .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 に答える