Question

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

未捕获的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',$('#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事件，以使框架初始化它：

新的“创建”事件：一次轻松增强所有小部件

虽然页面插件不再专门调用每个插件，但它   会发送一个“pagecreate”事件，大多数小部件都会使用它   自动初始化自己。只要一个小部件插件脚本   引用后，它将自动增强小部件的任何实例   它在页面上找到，就像之前一样。例如，如果选择菜单   插件被加载，它将增强它在新内容中找到的任何选择   创建页面。

现在，这个结构允许我们添加一个新的创建事件   触发任何元素，为您节省手动初始化的任务   该元素中包含的每个插件。到现在为止，如果是开发人员   通过Ajax或动态生成的标记加载到内容中   需要手动初始化所有包含的插件（listview按钮，   选择等）以增强标记中的小部件。

现在，我们方便的创建事件将初始化所有必要的插件   在该标记内，就像页面创建增强一样   过程有效。如果您要使用Ajax加载HTML块   标记（例如登录表单），您可以自动触发创建   转换它包含的所有小部件（输入和按钮）   case）进入增强版本。此方案的代码为：

$（...包含小部件的新标记...）。appendTo（“.ui-page”   ）.trigger（“创造”）;

创建与刷新：一个重要的区别

请注意，create事件之间存在重要差异   和一些小部件有的刷新方法。 create事件适合   用于增强包含一个或多个小部件的原始标记。该   某些小部件具有的刷新方法应该在现有的方法上使用   （已经增强的）以编程方式操作的小部件   并且需要更新UI才能匹配。

例如，如果您有一个动态添加新页面的页面   页面创建后带有data-role = listview属性的无序列表，   在该列表的父元素上触发create会对其进行转换   进入listview风格的小部件。如果有更多的列表项   以编程方式添加，调用listview的refresh方法   将这些新列表项更新为增强状态并离开   现有的清单项目未受影响。

链接：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>

jQuery Mobile初始化listview的正确方法

1 个答案: