您将如何“保存”某个页面(在客户端上),然后在其所有事件侦听器完好无损的情况下恢复它?
我在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:
点击我!