1

ページをどこか (クライアント上) に「保存」してから、すべてのイベント リスナーをそのままにして復元するにはどうすればよいでしょうか?

http://jsfiddle.net/KellyCline/Fhd55/にサンプルがあり、「ページ」を作成して保存し、ボタンをクリックして「次の」ページに移動し、最初のページを別のページに復元する方法を示していますボタンのクリックですが、最初のページのクリック リスナーはなくなりました。

これは html() が実行するシリアライゼーションによるものであることを理解しているので、明らかに、それは私が間違っていることですが、私が望むのはそれを正しく行うための手がかりです。

これはコードです：

    var history = [];

$(document).ready(function () {
    var page1 = $(document.createElement('div'))
        .attr({
        'id': 'Page 1'
    }).append("Page ONE text");
    var nextButton = $(document.createElement('button'));
    nextButton.append('NEXT');
    nextButton.on('click', function () {
        CreateNextPage();
    });
    page1.append(nextButton);
    $("#content").append(page1);
});

function CreateNextPage() {
    history.push( $("#content").html( ) );
    $("#content").html( 'Click Me!');
    var page1 = $(document.createElement('div'))
        .attr({
        'id': 'Page 2'
    }).append("Page TWO text");
    var nextButton = $(document.createElement('button'));
    nextButton.append('NEXT');
    nextButton.on('click', function () {
        CreateNextPage();
    });
    var prevButton = $(document.createElement('button'));
    prevButton.append('PREVIOUS');
    prevButton.on('click', function () {
        GoBack();
    });
    page1.append(nextButton);
    page1.append(prevButton);
    $("#content").append(page1);

}

function GoBack() {
    $("#content").html( history[history.length - 1]);
    history.pop( );
}

これはhtmlです：

私をクリックしてください！
4

1 に答える 1

0

これは、イベント委任によって解決するのが最善だと思います。基本的に、更新することがわかっているコンテンツをラッパー要素内にカプセル化し、リスナーをそれにバインドします。jQuery .on() メソッドを使用すると、セレクター文字列をフィルターとして渡すことができ、元の要素が一致する場合にのみハンドラーをトリガーします。ボタンにクラスまたは何かを与えてハンドルを取得し、上にバインドします。この記事にはいくつかの例があります。

$( '#content' ).on( 'click', 'button.next', createNextPage )

例えば。

于 2013-09-05T00:30:24.323 に答える