Восстановить содержимое страницы и сохранить прослушиватели событий

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:

Click Me!

Answer 1

Я думаю, что это лучше всего решить путем делегирования событий. В принципе, вы инкапсулируете контент, который, как вы знаете, собираетесь обновлять внутри элемента оболочки и привязывать к нему слушателей. Метод jQuery .on() позволяет передавать селекторную строку в качестве фильтра и запускает обработчик только в том случае, если исходный элемент соответствует. Дайте вашим кнопкам класс или что-то, чтобы получить ручку на них, а затем привяжите их выше. This article имеет несколько примеров.

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

например.