jQuery Mobile正确初始化列表视图的方法

Question

这是我的问题。我的索引中有几个硬编码的伪页面。一些填充了内容，一些空的填充仅通过ajax与用户交互。这个ajax内容包含html列表。当他们加载时，他们没有漂亮的jquery移动外观，所以我必须调用.listview（）方法，以便jqm框架在我的ajax回调中解析它。这就是我经常会收到这样JS错误：

遗漏的类型错误：无法读取的不确定

财产“jQuery162027575719612650573”的数量是绝不相同...

我不知道如果我使用的正确方法在页面加载ajax内容后解析一个listview。这个错误似乎在加载时有轻微的延迟时被触发，并且完整的事件被触发得太快，那时我的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调用激活列表视图

<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',$('#playlist'),doOnCallBack);">Rock - Classic Rock</a> 
    </li> 
    <li data-icon="refresh" data-theme="e"><a href="javascript:void(0);" onclick="loadGet('urlToReloadPlaylist',$('#playlist'),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> 

Answer 1

您使用的是什么版本的jQuery Mobile？在最新的测试版（1.0b2）你可以触发一个DOM元素create事件让框架初始化：

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到inititialize它：

<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>