Question

如何在某个地方（在客户端上）“保存”页面，然后将其恢复，并使其所有事件侦听器保持不变？

我在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：

点击我！

Answer 1

我认为这最好通过事件委派来解决。基本上，您在封装元素中封装了您知道要刷新的内容，并将侦听器绑定到该内容。 jQuery .on（）方法允许您将选择器字符串作为过滤器传递，并且只有在原始元素匹配时才会触发处理程序。给你的按钮一个类或什么来处理它们，然后将它们绑定在上面。 This article有一些例子。

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

例如

。

恢复页面内容并保留事件侦听器

1 个答案: