jQuery Mobile:未捕获TypeError:无法读取未定义的属性'jQuery ...'

时间:2013-01-16 18:42:22

标签: jquery-mobile

我有一个jQuery Mobile项目,它分布在不同的文件中,例如

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

        <link rel="stylesheet" href="css/custom.css" />

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="js/methods.js"></script>
    </head>
    <body>
        <!-- Termine Page -->
        <div data-role="page" id="firstPage">
            <div data-role="header" data-position="fixed">
                <h1>Header 1</h1>
                ...
            </div><!-- /navbar -->

            <div data-role="content">
            ...
            </div>
        </div>
    </body>
</html>

secondPage.html

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" charset="utf-8" src="cordova-2.3.0.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />

        <link rel="stylesheet" href="css/custom.css" />

        <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
        <script src="js/methods.js"></script>
    </head>
    <body>
        <div data-role="page" id="pageTwo" class="ui-page">
            <div data-role="header" data-position="fixed" id="terminDetailSeiteHeader">
            <h1>Header 2</h1>
        </div>
        <div data-role="content">
                <div id="contentToFillWithDynamicListView"></div>
            </div>
        </div>
    </body>
</html> 

然后,我得到了一个脚本,它应该调用一个php-Script并生成一个listview:

function listViewCreation() {
    var url = 'http://www.myServer.com/myPhp.php?someParameters=1&callback=?';
        $.getJSON(url, function(data) {
            $('#contentToFillWithDynamicListView').empty();
            var collapsibleList = '<ul data-role="listview">';
            var myselfIsIncluded = 0;
            $.each(data, function(key, value) {
                collapsibleList += '<li>' + value['displayName'] + '</li>';
            });
            collapsibleList += '</ul>';

            $('#contentToFillWithDynamicListView').html(collapsibleList).trigger('create');
        });
    }

.trigger('create')导致错误......我错过了什么?

编辑1

listViewCreation的调用方式如下:

$("#pageTwo").live("pageshow", function(e, data){
    listViewCreation();
});

编辑2 我从不同的服务器获取远程数据,这似乎是错误的原因;但我不知道如何解决它...我正在两个页面上获取数据(1和2);对于它工作的第一页,对于第二页它没有......

$.getJSON(url, function(data) {
    ...
}

1 个答案:

答案 0 :(得分:9)

我可以看到你正在使用jQuery mobile的最新稳定版本。

你的问题是

trigger('create');

它不用于jQuery移动列表视图重定名。你应该使用:

.listview('refresh');

代替。不要相信官方的jQM文档,应该弃用触发器('create')。每个jQM小部件都有一个用于刷新它的功能,例如按钮('刷新')

在更改页眉,页脚或内容时也不要使用触发器('创建'),它将无效,您可以在页面上触发pagecreate:

trigger('pagecreate');

编辑:

如果:

  

未捕获错误:无法在listview之前调用方法   初始化;试图调用方法'刷新'

呼叫:

$('#listviewid').listview().listview('refresh');

第一个调用将初始化它,第二个调用将为其设置样式。

在此 ARTICLE

中详细了解此主题