未捕获的TypeError：无法读取未定义的属性’jQuery162027575719612650573′
这个数字永远不变……
我想知道在页面加载ajax内容后是否使用正确的方法来解析listview.当加载有轻微的延迟并且过早触发完整事件并且那时我的列表视图还没有在DOM中时,似乎会触发错误,只是一个猜测.在ajax调用之后初始化listview的推荐方法是什么？
这是非常不幸的,因为当js错误发生时,似乎冻结了任何进一步的js执行……
所以这是我的空伪页面：
<div data-role="page" id="playlist" data-add-back-btn="true">
<div data-role="header">
<h1><g:message code="pd.playlist" /></h1>
</div>
<div data-role="content"></div>
</div>
在它下面有一个脚本标签,在pageshow上绑定一个ajax调用来激活listview
<script type="text/javascript">
$('#playlist').bind('pageshow',function () {
$.ajax({
url: "updatePlaylistTemplate.gsp",error:function(x,e){handleAjaxError(x,e);},beforeSend:function(){$.mobile.showPageLoadingMsg();},complete:function(){
$.mobile.hidePageLoadingMsg();
$('[data-role="listview"]').listview(); //re-active all listview
},success:function(data,textStatus,jqXHR){
$('#playlist').find('[data-role="content"]').html(data);
}
});
});
</script>
updatePlaylistTemplate返回此(提取)：
<ul data-role="listview" data-split-theme="d">
<li data-icon="delete">
<a href="javascript:void(0);" onclick="loadGet('urlToRemoveProdiver',$('#playlist'),doOnCallBack);">Provider: Bell</a>
</li>
<li data-icon="delete">
<a href="javascript:void(0);" onclick="loadGet('urlToRemoveChannel',doOnCallBack);">Rock - Classic Rock</a>
</li>
<li data-icon="refresh" data-theme="e"><a href="javascript:void(0);" onclick="loadGet('urlToReloadPlaylist',doOnCallBack)">Refresh list</a></li>
<li data-role="list-divider">Next song</li>
<li>
<a href="urlToViewSongInfo">
<img src="images/song.gif" />
<h3>Albert Flasher</h3>
<p>The Guess Who</p>
<p class="ui-li-aside">Next</p>
</a>
</li>
<li data-role="list-divider">Now playing</li>
<li>
<a href="urlToviewSongInfo">
<img src="images/song.gif" />
<h3>Crime of the Century</h3>
<p>Supertramp</p>
<p class="ui-li-aside">14h49</p>
</a>
</li>
<li data-role="list-divider">PrevIoUs songs</li>
<li>
<a href="urlToViewSongInfo">
<img src="images/song.gif"" />
<h3>Desperado</h3>
<p>Alice Cooper</p>
<p class="ui-li-aside">14h45</p>
</a>
</li>
[...]
</ul>
解决方法
New “create” event: Easily enhance all widgets at once
While the page plugin no longer calls each plugin specifically,it
does dispatch a “pagecreate” event,which most widgets use to
auto-initialize themselves. As long as a widget plugin script is
referenced,it will automatically enhance any instances of the widgets
it finds on the page,just like before. For example,if the selectmenu
plugin is loaded,it will enhance any selects it finds within a newly
created page.This structure now allows us to add a new create event that can be
triggered on any element,saving you the task of manually initializing
each plugin contained in that element. Until now,if a developer
loaded in content via Ajax or dynamically generated markup,they
needed to manually initialize all contained plugins (listview button,
select,etc.) to enhance the widgets in the markup.Now,our handy create event will initialize all the necessary plugins
within that markup,just like how the page creation enhancement
process works. If you were to use Ajax to load in a block of HTML
markup (say a login form),you can trigger create to automatically
transform all the widgets it contains (inputs and buttons in this
case) into the enhanced versions. The code for this scenario would be:$( …new markup that contains widgets… ).appendTo( “.ui-page”
).trigger( “create” );Create vs. refresh: An important distinction
Note that there is an important difference between the create event
and refresh method that some widgets have. The create event is suited
for enhancing raw markup that contains one or more widgets. The
refresh method that some widgets have should be used on existing
(already enhanced) widgets that have been manipulated programmatically
and need the UI be updated to match.For example,if you had a page where you dynamically appended a new
unordered list with data-role=listview attribute after page creation,
triggering create on a parent element of that list would transform it
into a listview styled widget. If more list items were then
programmatically added,calling the listview’s refresh method would
update just those new list items to the enhanced state and leave the
existing list items untouched.
链接：http://jquerymobile.com/blog/
您还可以复制jQuery Mobile创建的输出并使用该结构,而不是使用< li>标签并依赖于jQM来初始化它：
<li data-role="list-divider" class="ui-li ui-li-divider ui-btn ui-bar-a ui-btn-up-undefined" role="heading"><span>List Divider</span></li> <li data-theme="b" class="ui-li ui-li-static ui-body-b">Regular LI</li>
