相关疑难解决方法(0)

jQuery Mobile初始化listview的正确方法

这是我的问题.我的索引中有一些硬编码的伪页面.一些填充了内容,一些空的,只有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>
Run Code Online (Sandbox Code Playgroud)

在它下面有一个脚本标签,在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>
Run Code Online (Sandbox Code Playgroud)

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" …
Run Code Online (Sandbox Code Playgroud)

jquery-mobile

4
推荐指数
1
解决办法
2万
查看次数

标签 统计

jquery-mobile ×1