Динамическое создание ListView не работает с мобильной версией Jquery
Я столкнулся с проблемой с Jquery Mobile: я хочу динамически создать listView внутри gridView с нуля, используя JS-скрипт.
Мой HTML-код:
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<!--<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>-->
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="b" data-role="header">
<h1>Listview Test</h1>
</div>
<div data-role="content" id="pageContent">
</div>
</div>
</body>
И мой код JS:
$(document).on('pagebeforeshow', '#index', function()
{
var html = "";
html += "<div class='ui-grid-b'>";
html += "<div class='ui-block-a' id='block_a'>"
html += "<ul data-role='listview' data-split-icon='star' data-split-theme='a' class='listview' id='daViewList'>"
html += "<li id='grid_li'>"
html += "<a href='projets.html'>";
html += "<img src='http://demos.jquerymobile.com/1.2.0-alpha.1/docs/lists/images/album-bb.jpg' />";
html += "<h3>A</h3>";
html += "<p>Another one</p>";
html += "<p>And finally another one</p></a>";
html += "<a href='simulations.html' data-transition='slide' data-icon='arrow-r' data-theme='c'></a>";
html += "</li>";
html += "</ul>";
html += "</div>";
html += "</div>";
$(html).appendTo('#pageContent');
$("#daViewList").listview().listview("refresh");
});
Этот JSFiddle: http://jsfiddle.net/KagLD/ показывает вам именно то, чего я хочу достичь, но когда я отмечаю опцию Jquery Mobile 1.2.0 на левой панели, код больше не работает. Проблема в том, что я использую Jquery Mobile для создания своего приложения, поэтому я не могу от него избавиться.
Что кажется неправильным в коде? Что мне нужно изменить, чтобы соответствовать требованиям Jquery Mobile?
Спасибо вам всем