Jquery mobile jQuery Mobile是初始化listview的正确方法

这是我的问题。我的索引中有几个硬编码的伪页面。有些内容被填满，有些内容是空的，只有ajax才能在用户交互时被填满。此ajax内容包含html列表。加载时，它们没有很好的jquery mobile外观，因此我必须调用.listview（）方法，以便jqm框架在我的ajax回调中解析它。这就是我经常遇到的JS错误：

未捕获的TypeError:无法读取未定义的属性“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调用以激活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>

$（“#播放列表”）.bind（'pageshow'，function（）{
$.ajax({
url:“updatePlaylistTemplate.gsp”，
错误：函数（x，e）{handleAjaxError（x，e）；}，
beforeSend:function（）{$.mobile.showPageLoadingMsg（）；}，
完成：函数（）{
$.mobile.hidePageLoadingMsg（）；
$（“[data role=“listview”]”）。listview（）；//重新激活所有listview
},
成功：函数（数据、文本状态、jqXHR）{
$（“#播放列表”）.find（“[data role=“content”]”）.html（数据）；
}
});
});

updatePlaylistTemplate返回以下内容（摘录）：

下一首歌


正在播放


以前的歌曲


[...]

您使用的是哪个版本的jQuery Mobile？在最新的测试版（1.0b2）中，您可以触发dom元素上的

create

事件，让框架对其进行初始化：

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

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

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

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

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

$（…包含小部件的新标记…）.appendTo（“.ui页面” ).触发（“创建”）

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

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

例如，如果您有一个页面，其中动态附加了一个新的 创建页面后，数据角色为listview属性的无序列表， 在该列表的父元素上触发create将对其进行转换 进入listview样式的小部件。如果需要更多的列表项 通过编程添加，调用listview的刷新方法 仅将这些新列表项更新为增强状态，并保留 未触及现有列表项

链接：

您还可以复制jQuery Mobile创建的输出并使用该结构，而不是使用

标记，并根据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>

列表分隔符
常规li

Yes这似乎解决了在特定id上调用带有create event的trigger方法时出现的问题

code$（“#playlist”）.trigger（“create”）谢谢你的建议。我一直在寻找一种更灵活的方式，但现在就可以了。我试着对我的选择器更一般，但我尝试的一切都不起作用。它必须在一个特定的id上。。。