jQuery Mobile Listview在Chrome中无法正确刷新

Question

尽管我已经完全注释掉了listview。（'refresh'）方法，但是当我将page更改为listview时，出现了以下错误。 Safari可以很好地加载listview，但是每当我使用chrome时，我都会遇到问题。 这件事发生在别人身上吗？ 我正在document.ready（）{}中进行所有加载

当我完全注释掉列表视图时，甚至会发生此问题。

启动changePage的代码

<!DOCTYPE html>
<html>
<head>

  <title>First jQuery Mobile Example</title>

  <!-- the three things that jQuery Mobile needs to work-->
 <link rel="stylesheet" href="./signup.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>
  <!-- Page starts here -->
<div data-role="page" data-theme="c" id="surveyList">

<script>

$(document).bind('mobileinit', function () {
    $.mobile.page.prototype.options.theme  = "c";
});

function createNewSurvey() {

    console.log("Creating new survey");

   $.mobile.changePage( "surveyCreator.html", { transition: "slide"} );
}

function goToSurveyResults(surveyID) {
  console.log("hello");
    console.log("This survey's id  is: ",surveyID);

    surveyId = surveyID;
    console.log("surveyId is = ", surveyId);

   // $.getJSON("http://iwaiter-app.com/iWaiter_scripts/getSurveyAnalytics.php?surveyID=" + surveyId, function(json) {
   //       console.log(json);

       console.log("surveyId is = ", surveyId);
         $.mobile.changePage( "surveyResults.html", { transition: "slide"} );
             console.log("changed page");
  //  });

}

function deleteSurvey(surveyID) {
  console.log("Deleting survey with id: ",surveyID);
}


//$(document).ready(function(){
  $('#surveyList').bind('pageinit', function() {

  var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
var fullDate = month + "-" + day + "-" + year;

$('#footer').append('<p>  Today: ' + fullDate + '</p>');
//document.write(month + "/" + day + "/" + year)

// get the JSON data from server
    $.getJSON("http://iwaiter-app.com/iWaiter_scripts/get_surveyList.php?email=alo@mit.edu", function(data) {

      console.log(data);

      // Define some local instance variables
      var listOfSurveys = data.Results;
      var currentDate;
      var numbersOrLetters;
      var onOff;
      var surveyDescription;
      var dataTheme;

       $('ul#surveyList').append('<li><a href="javascript:void(createNewSurvey());">Create New Survey</a></li>');

        for (i = 0; i < listOfSurveys.length; i++){

            // set whether the survey uses numbers or letters
            if (listOfSurveys[i].Numbers_or_letters > 0) 
                 {numbersOrLetters = 'Letters';}
            else {numbersOrLetters = 'Numbers';}

            // set whether survey is on or off
            if (listOfSurveys[i].On_off > 0) {onOff = 'Off'; dataTheme = 'data-theme="c"';}
            else {onOff = 'On'; dataTheme = 'data-theme="b"';}

            // Set description
            if (listOfSurveys[i].Survey_description != '')
              surveyDescription = ', ' + listOfSurveys[i].Survey_description;
            else
              surveyDescription = listOfSurveys[i].Survey_description;

            // set surveyAuthKey
            var authKey = listOfSurveys[i].Survey_authKey;
            console.log("authkey: ",authKey);

          if (listOfSurveys[i].Date == currentDate) {
              // create row in same section

          /* old list element
                $('ul#surveyList').append('<li><a href="javascript:void(goToSurveyResults(' + listOfSurveys[i].Survey_id + '));"><h1>' + listOfSurveys[i].Survey_authKey + '</h1><p>' + listOfSurveys[i].Number_of_options + ' Options, ' + numbersOrLetters + ', ' + onOff + ', ' + surveyDescription + '</p></a></li>');
           */     
                 $('ul#surveyList').append('<li class="ui-btn ui-btn-icon-right"' + dataTheme + '><a href="javascript:void(goToSurveyResults(' + listOfSurveys[i].Survey_id + '));"><h1>' + listOfSurveys[i].Survey_authKey + '</h1><p>' + listOfSurveys[i].Number_of_options + ' Options, ' + numbersOrLetters + ', ' + onOff + surveyDescription + '</p></a><a href="#" onclick="deleteSurvey(' + listOfSurveys[i].Survey_id + ')" data-icon="delete" class="ui-li-link-alt ui-btn "' + dataTheme + ' ></a></li>');


          }
          else {
              // otherwise create a new section
              currentDate = listOfSurveys[i].Date;
              console.log(currentDate);

               $('ul#surveyList').append('<li data-role="list-divider">' + currentDate + '</li>');

                $('ul#surveyList').append('<li class="ui-btn ui-btn-icon-right"' + dataTheme + '><a href="javascript:void(goToSurveyResults(' + listOfSurveys[i].Survey_id + '));"><h1>' + listOfSurveys[i].Survey_authKey + '</h1><p>' + listOfSurveys[i].Number_of_options + ' Options, ' + numbersOrLetters + ', ' + onOff +surveyDescription + '</p></a><a href="#" onclick="deleteSurvey(' + listOfSurveys[i].Survey_id + ')" data-icon="delete" class="ui-li-link-alt ui-btn "' + dataTheme + '></a></li>');
            }
          }
       console.log("Refreshed");
        $('ul#surveyList').listview('refresh');

    });

});

</script>


    <header data-role="header">
    <a href="Master_Survey.html" data-direction="reverse" rel="external" data-icon="" data-transition="slide" class="ui-btn-right">Logout</a>
    <h1>My Surveys</h1>

  </header>

  <div data-role="myContent">

    <div id="surveysContainer">

      <ul id="surveyList" data-role="listview" data-split-icon="delete">
      </ul>

    </div>

  </div>  




<footer data-role="footer" id="footer"></footer>

</div>

  </body>

</head>
</html>

带有错误的页面

<!DOCTYPE html>
<html>
<head>

  <title>First jQuery Mobile Example</title>

  <!-- the three things that jQuery Mobile needs to work-->
 <link rel="stylesheet" href="./signup.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>
  <!-- Page starts here -->
<div data-role="page" data-theme="c" id="resultsListPage" data-add-back-btn="true">

<script>

$('#resultsListPage').bind('pageinit', function() {

  console.log("new page");
  /*
   $('ul#resultsList').append('<li>Mean: </li>');
       $('ul#resultsList').append('<li>Standard Deviation: </li>');

     $('#resultsList').listview();
        $('#resultsList').listview('refresh');
        */
});


$(document).ready(function(){
  console.log("how far?");
//document.write(month + "/" + day + "/" + year)

// get the JSON data from server
    //$.getJSON("http://iwaiter-app.com/iWaiter_scripts/get_analytics.php?surveyAuthKey=alo-1", function(data) {

    //  console.log(data);

      // Define some local instance variables
     // var listOfSurveys = data.Results;
      var currentDate;
      var numbersOrLetters;
      var onOff;
      var surveyDescription;

      // header
      // $('ul#surveyList').append('<li data-role="list-divider">' + currentDate + '</li>');

/*
      // result rows
       $('ul#resultsList').append('<li>Mean: </li>');
       $('ul#resultsList').append('<li>Standard Deviation: </li>');
     */

     // $('#resultListContainer').html('<ul id="resultsList" data-role="listview" data-inset="false" data-filter="true"><li>Mean: </li><li>Standard Deviation: </li></ul>');

     //  $("#resultsList").listview();
     //  $("#resultsList").listview('refresh');

    //  $("#resultsList").listview()

       // $('ul#resultsList').listview('refresh');

 // });

});

</script>


    <header data-role="header">
    <a href="Master_Survey.html" data-direction="reverse" rel="external" data-icon="" data-transition="slide" class="ui-btn-right">Logout</a>
    <h1>Survey Analytics</h1>
  </header>








<footer data-role="footer" id="footer"></footer>

</div>

  </body>

</head>
</html>


Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh' 

Answer 1

• http://jquerymobile.com/demos/1.1.1/docs/api/events.html

不要使用document.ready（）

Answer 2

由于您的错误：

Uncaught cannot call methods on listview prior to initialization; attempted to call method 'refresh' 

指示在尚未初始化为列表视图的元素上的代码中的某个位置调用了.listview('refresh') 。

在您的代码中，以下绑定中唯一的.listview('refresh')是：

$('#surveyList').bind('pageinit', function() {
     ...
     $('ul#surveyList').listview('refresh');
     ...
}

当您更改页面时，这将不会解除绑定。 这意味着当您更改页面并发生pageinit事件时，javascript仍将尝试执行此块中的代码。 但是该元素不在当前页面上，因此（可能）未正确初始化。