Динамически создать страницу для мобильных устройств jQuery от объекта

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

Именно так я создавал страницы: http://jsfiddle.net/pjUcn/ 

var page = $("<div data-role='page' id='page'><div data-role=header>
<a data-iconpos='left' data-icon='back' href='#' data-role='button' 
data-rel='back'>Back</a><h1>Dynamic Page</h1></div>
<div data-role=content>Stuff here</div></div>");

page.appendTo($.mobile.pageContainer);

$.mobile.changePage('#page');

Вот как я хочу их создать: http://jsfiddle.net/8NZMw/2/ 

var page = $('<div/>'),
     header = $('<div/>'),
     back = $('<a/>'),
     title = $('<h1/>'),
     content = $('<div/>');

page.data('role', 'page');
page.attr('id', 'page');

header.data('role', 'header');

back.data('iconpos', 'left');
back.data('icon', 'back');
back.data('role', 'button');
back.data('rel', 'back');
back.attr('href', '#');
back.text('Back');

title.text('Dynamic Page');

header.append(back);
header.append(title);

page.append(header);

content.data('role', 'content');
content.text('stuff here');

page.append(content);

page.appendTo($.mobile.pageContainer);

$.mobile.changePage('#page');

У меня нет проблем с созданием других простых мобильных элементов JQuery, таких как это , я просто не могу понять, как создать целую страницу таким образом. Я даже пытался позвонить А.триггер ("создать") на объекте страницы,но это все равно не помогло.

Любая помощь будет очень признательна, спасибо!

1 2
javascript jquery jquery-mobile dom-manipulation

1 ответ:

Вот, это работает для меня (обратите внимание, где я закомментировал ваш код, чтобы заставить его работать) - 

var page = $('<div/>'),
    header = $('<div/>'),
    back = $('<a/>'),
    title = $('<h1/>'),
    content = $('<div/>');

//page.data('role', 'page');
page.attr('data-role', 'page');
page.attr('id', 'page');

//header.data('role', 'header');
header.attr('data-role', 'header');

back.data('iconpos', 'left');
back.data('icon', 'back');
back.data('role', 'button');
back.data('rel', 'back');
back.attr('href', '#');
back.text('Back');

title.text('Dynamic Page');

header.append(back);
header.append(title);

page.append(header);

//content.data('role', 'content');
content.attr('data-role', 'content');
content.text('stuff here');

page.append(content);

page.appendTo($.mobile.pageContainer);

$.mobile.changePage('#page');

Вот демо jsFiddle

5