jquery 移动触发器（'创建'）答案

【问题标题】：jquery mobile trigger('create')jquery 移动触发器（'创建'）
【发布时间】：2014-08-30 14:08:25
【问题描述】：

我有一种情况，我从 AJAX 调用生成列表，然后切换到页面。当我这样做时，我收到以下错误：

  TypeError: d[0] is undefined
[Break On This Error]   

...-corner-all");this._addThumbClasses(h);this._addThumbClasses(e.find(".ui-link-in...

这是执行 ajax 调用并加载 DIV 的代码：

function handleGetReports(data) {
        $('#recentReportsText').html(data).trigger('create');
        $.mobile.changePage("#recentReportsPage", { changeHash:true});
}
function recentReports() {             
        $.post("getrecentreports.php",'',handleGetReports);
}

这是 ajax 调用返回的数据：

<ul data-role="listview" data-split-icon="delete"><li data-role="list-divider">08/17 01:46pm<p class="ui-li-aside">Pending</p></li>
<li><a href="#">basic Company<br/>basic Username</a><a href="javascript:deleteReport('4');">Delete</a></li><li data-role="list-divider">08/16 06:50pm<p class="ui-li-aside">Complete</p></li>
<li><a href="javascript:popUp('reports/2012-08-16-3.pdf');">basic Info</a><a href="javascript:deleteReport('3');">Delete</a></li><li data-role="list-divider">08/16 06:44pm<p class="ui-li-aside">Complete</p></li>
<li><a href="javascript:popUp('reports/2012-08-16-2.pdf');">basic Number</a><a href="javascript:deleteReport('2');">Delete</a></li><li data-role="list-divider">07/16 06:38pm<p class="ui-li-aside">Pending</p></li>
<li><a href="#">basic Address</a><a href="javascript:deleteReport('1');">Delete</a></li></ul>

这是显示的页面：

<div data-role="page" id="recentReportsPage" data-title="Recent Reports" data-needs-auth="true">
<div data-role="header" data-theme="e">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Recent Reports</h1>
</div>
<div data-role="content">        
<div id="recentReportsText"></div>
</div><!-- /content --> 
</div><!-- /recent reports -->

如果我停止 .trigger('create') 调用，则不会生成错误，但显示的数据未增强（即：没有列表视图）。如果我剪切并粘贴 ajax 返回的 HTML 并将其直接放在要显示的内容部分的页面中，它将按照我的意图以拆分列表格式正确显示。这是一个 jquery 移动错误还是我做错了什么？

编辑：我使用的是 jquery 的最小化版本。我已将其更改为最小化，这是错误：

TypeError: parentPage[0] is undefined (line 5189 of jquery-mobile.1.1.1.js)
[Break On This Error]   

parentId = parentUrl || parentPage[ 0 ][ $.expando ],

编辑：顺便说一句。这只是列表视图的错误。我最初在所有浏览器中都将结果以表格形式返回。

【问题讨论】：

如果返回的 ajax html 被包装在
块中，它通常可以工作（边距很奇怪）。我可以用一些 CSS 处理边距。
我收回了。它适用于火狐。 Chrome 和 Safari 仍然会报错。
如果不使用 .trigger('create') 然后使用 $('#ListViewsId').listview('refresh');你应该得到你的增强列表。
实际上可能是因为您在一个已经存在的元素上调用创建，而不是您应该执行以下操作：data.appendTo("#recentReportsText").trigger("create");
当我进行刷新调用时，我收到错误：未捕获的无法在初始化之前调用 listview 上的方法；试图调用方法“刷新”

标签： jquery jquery-mobile

【解决方案1】：

我修改了您发布的源代码并创建了一个工作示例。

index.html 包含两个页面，第一页和报告页面。 test.html 是包含报告数据的文件。

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
    </head>
    <body>
        <script>

            function handleGetReports(d) {
                $('#recentReportsText').html(d).trigger('create');
            }

            $(function() { 
                $('#recentReportsPage').live("pagecreate", function() {
                    $.get('test.html', function(data) {
                        handleGetReports(data);
                    });
                });
            });
        </script>

        <div data-role="page" id="firstpage" class="type-home">
            <div data-role="content">
                <a href="#recentReportsPage">Click</a>
            </div>
        </div>

        <div data-role="page" id="recentReportsPage" data-title="Recent Reports" data-needs-auth="true">
            <div data-role="header" data-theme="e">
                <a href="#firstpage" data-icon="home" data-iconpos="notext"></a>
                <h1>Recent Reports</h1>
            </div>
            <div data-role="content">        
                <div id="recentReportsText"></div>
            </div> 
        </div>
    </body>
</html>

test.html

<ul data-role="listview" data-split-icon="delete"><li data-role="list-divider">08/17 01:46pm<p class="ui-li-aside">Pending</p></li>
<li><a href="#">basic Company<br/>basic Username</a><a href="javascript:deleteReport('4');">Delete</a></li><li data-role="list-divider">08/16 06:50pm<p class="ui-li-aside">Complete</p></li>
<li><a href="javascript:popUp('reports/2012-08-16-3.pdf');">basic Info</a><a href="javascript:deleteReport('3');">Delete</a></li><li data-role="list-divider">08/16 06:44pm<p class="ui-li-aside">Complete</p></li>
<li><a href="javascript:popUp('reports/2012-08-16-2.pdf');">basic Number</a><a href="javascript:deleteReport('2');">Delete</a></li><li data-role="list-divider">07/16 06:38pm<p class="ui-li-aside">Pending</p></li>
<li><a href="#">basic Address</a><a href="javascript:deleteReport('1');">Delete</a></li></ul>

我希望这会有所帮助。

BR，
托利斯

【讨论】：

谢谢。但我已经尝试过了。我要么得到原始错误，要么第一次工作，但是当我使用后退按钮然后再次单击页面链接时，我得到页面的未增强显示。要显示的列表由.php动态生成
这似乎是解决方案：$(document).bind('pageinit, function() { $('#recentReportsPage').live('pagecreate', function(){ $.get ('getrecentreports.php', function(data) { handleGetReports(data); }); }); });