1

使用 jQuery Mobile 创建应用程序，我想要一个从服务器加载数据的页面，当我出于各种原因加载时，我正在 PHP 中构建列表项。

因此，当我第一次加载页面时，一切都很顺利，如果我再次加载它，数据会重新插入，但标记不会增强。

SO上有几个线程解决了这个确切的问题，但是接受的答案总是使用.trigger（'create'）。我已经这样做了，但没有成功，我尝试使用 .listview('refresh')、.trigger('updatelayout')，我尝试在页面上触发这些事件，页面的类， listview div，把它放在我的ajax调用的完整：但什么都没有。所以我求助于社区：

我正在使用 jQM 1.1.1：如果您需要更多信息，我是否错过了一些信息，我很乐意提供：

这是我的首页

<div data-role="page" id="frontPage">
    <div data-role="header" data-theme="e" data-id="commonHead" data-position="fixed">
        <a href="index.html" data-role="button" data-icon="home" data-iconpos="notext"></a>
        <h1>
            myApp
        </h1>
    </div>
    <div data-role="content" class="content">
        <ul data-role="listview">
            <li><a href="#" onClick="viewfList()">List</a></li>
        </ul>
    </div>
</div>

这是我导航到的页面：

<div data-role="page" id="fView">
    <div class="commonHeader"></div>
    <div data-role="content">
        <ul data-role="listview" id="fList">

        </ul>
    </div>
</div>

这是我用来调用页面的 viewfList 函数

function viewFeatList(){
    jQuery.ajax({ //getting my new <li>
            url: 'http://sources.mysource.com/get_list.php',
            type: 'POST',
            //data: myData,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, textStatus, jqXHR){     
                $('#fList').empty(); //emptying the listview                
                for (i=0;i<data.f.length;i++){
                    $('#fList').append(data.f[i]); //appending the <li>
                    }
                $('#fList').trigger('create'); //this version's attempt to re-enhance markup
                $.mobile.changePage('#fView');   //navigate to page                         

                },
            error:  function(jqXHR, textStatus, errorThrown){
                myAlert('There was an error submitting your request')
                }
            });

    }
4

1 回答 1

0

好的，感谢评论的启发，并克服了我自己因沮丧而疏忽的疏忽，我找到了解决方案：

这是我的新功能

function viewfList(){
    jQuery.ajax({
            url: 'http://sources.mysource.com/get_list.php',
            type: 'POST',
            //data: myData,
            dataType: 'jsonp',
            jsonp: 'jsoncallback',
            success: function(data, textStatus, jqXHR){     
                $('#fList').empty();;               
                for (i=0;i<data.f.length;i++){
                    $('#fList').append(data.f[i]);
                    }

                $.mobile.changePage('#fView');  
                $('#fList').listview('refresh');                                            
                },
            error:  function(jqXHR, textStatus, errorThrown){
                myAlert('There was an error submitting your request')
                }
            });

    }

结果 .listview('refresh') 确实有效，并且根据CrimsonChin的建议确实在 Javascript 控制台中抛出了一个错误，但是我在页面上执行这些而不是实际的 listview 元素。当我在 listview 元素上执行它时，我得到了这个错误：

Uncaught 不能在初始化之前调用 listview 上的方法；试图调用方法“刷新”

显然，这导致我在页面更改为之后调用刷新。

我对此唯一担心的是：如果有一天页面上有很多事情要做，是否有可能我会在屏幕上看到未增强的标记闪烁一秒钟，然后才会发生变化……现在不会发生但我目前正在运行一个非常基本的页面。

谢谢你的帮助。

于 2012-09-11T15:44:45.037 回答