Обновить динамически созданную страницу в jquery mobile

Question

У меня следующая проблема:

Я использую Jquery Mobile, пользователь может искать товары, и детали этих страниц создаются динамически:

что-то вроде:

 $("body").append('<div class="products" data-role="page" id="'+pageId+'"><div data-role="header"><p class="backSearch"><a href="#base" data-rel="back" data-role="button" data-inline="true" data-icon="back">back</a></p><h1>' +data.title+ '</h1></div></div>');

 // create the content DIV
 $('#'+pageId).append('<div data-role="content" id="content_'+pageId+'">...</div>');

Работает нормально, но проблема в том, что когда вы переходите к деталям продукта и нажимаете на обновление, снова появляется форма, а после обновления Dom у меня больше нет доступа к деталям продукта (необходимосделать еще один поиск и т.д ..)

Есть решение для решения этой проблемы?

Answer 1

Чтобы сохранить эти данные локально и сохранить их доступными после обновления браузера, попробуйте использовать store.js. Это кросс-браузерная библиотека JavaScript для хранения локальных переменных:

https://github.com/marcuswestin/store.js

Answer 2

Используйте empty (), чтобы очистить содержимое цели

$('#'+pageId).empty().append('<div data-role="content" id="content_'+pageId+'">...</div>');

Answer 3

Я храню данные, используя локальное хранилище браузера. Когда страница обновляется, я проверяю данные в переменной и загружаю их из локального хранилища, если мне нужно.