重新加载页面后Listview不刷新，在jquery mobile中删除列表后无法从listview中删除答案

【问题标题】：Listview not refreshing after reload the page and cannot be removed from listview after deleting the list in jquery mobile重新加载页面后Listview不刷新，在jquery mobile中删除列表后无法从listview中删除
【发布时间】：2013-09-20 07:29:21
【问题描述】：

您好，我正在使用HTML 5 Web sql Database 参与创建和检索数据。我期望它的功能正常工作。

当我在列表视图中的下一页中显示结果时，它显示正确，但是当我刷新页面列表视图时，不显示仅转到上一页，然后进入此页面它的工作，并且我在列表视图中添加了一个删除按钮，当我单击删除按钮记录被删除。但列表未从列表视图中删除，仅转到上一个然后仅删除此页面。如何解决这个问题。

这是我的代码：

<!DOCTYPE HTML>
 <html>
 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Clientside Database</title>
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-     1.3.2.min.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
 <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>

<body>
 <div data-role=page id="home">
<div data-role=header>
    <h1>ClientSide Database</h1>
</div>
<div data-role="content">

    <ul data-role="listview" data-inset="true">


        <li data-role="fieldcontain">
            <label for="firstname">FirstName:</label>
            <input type="text" name="firstname" id="firstname" value="" class="required" />
        </li>

          <li data-role="fieldcontain">
            <label for="lastname">LastName:</label>
            <input type="text" name="lastname" id="lastname" value="" class="required" />
        </li>

           <li data-role="fieldcontain">
            <label for="email">Email:</label>
            <input type="email" name="email" id="email" value="" class="required" />
        </li>


         <li data-role="fieldcontain">
            <label for="date">Date of Birth:</label>
            <input type="date" name="date" id="date" value="" class="required" />
        </li>

         <li >
        <input value = "SUBMIT" type = "button" name="submit" id="submit" />
        <input type="button" value="view" id="view"/>
        </li>
        </ul>

</div><!-- /content -->
 </div>
 <div data-role="page" id="dataview" data-add-back-btn=true>
 <div data-role="header">
  <h1>List of customers</h1>
  </div>

 <div data-role="content">

 </div>
 </div>
 </body>
  </html>
  <script type="text/javascript">
  var db = openDatabase("MyDatabase","1.0","My ClientSide Database",1000000);
  $("#submit").bind('click',function(e){
db.transaction(function(transaction){
var sql = "CREATE TABLE  IF NOT EXISTS clientrecords " +
    " (id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, " +
    "fname VARCHAR(100) NOT NULL, " + 
    "lname VARCHAR(100) NOT NULL," + 
    "email VARCHAR(100) NOT NULL ," + 
    "date VARCHAR(100) NOT NULL)"   
transaction.executeSql (sql, undefined, function ()
   { 
     console.log("Table Created Successfully");
      }, error);  
    });
     var lname = $("#firstname").val ();
     var fname = $("#lastname").val ();
     var email =$("#email").val();
     var date  =$("#date").val();


 db.transaction (function (transaction) 
 {
     var sql = "INSERT INTO clientrecords (lname, fname,email,date) VALUES (?, ?, ?, ?)";
transaction.executeSql (sql, [lname, fname,email,date], function ()
{ 
console.log("Data Inserted Successfully");
}, error);
  });

  });

  $("#view").bind ("click", function (event)
{
  db.transaction (function (transaction) 
 {
var sql = "SELECT * FROM clientrecords";
transaction.executeSql (sql, undefined, 
function (transaction, result)
{
  var html = "<ul data-icon=false data-split-icon=delete data-split-theme=d>";
  if (result.rows.length)
  {
    for (var i = 0; i < result.rows.length; i++) 
    {
      var row = result.rows.item (i);
      var lname = row.lname;
      var fname = row.fname;
      var email = row.email;
      var date = row.date;
      var id = row.id;
      html += "<li " + "id=" + id + ">";
      html +='<a href="#"><h2>' + lname + "&nbsp;" + fname + '</h2><p>'+ email +'</p> <div class="ui-li-aside"><p>'+date+'</p></div></a> <a href="#" class="delete">Delete</a>';
      html +='</li>';

    }
  }
  else
  {
    html += "<li> No customer </li>";
  }

  html += "</ul>";

  $("#dataview").unbind ().bind ("pagebeforeshow", function ()
  {
    var $content = $("#dataview div:jqmData(role=content)");
    $content.html (html);
    var $ul = $content.find ("ul");
    $ul.listview ();


     $(".delete").bind ("swiperight", function (event)
    {

      var listitem = $(this).parent( "li" ).attr ("id");
      if (!listitem) return;

      $(listitem).remove ();

      db.transaction (function (transaction) 
      {
        var sql = "DELETE FROM clientrecords WHERE id=?";
        transaction.executeSql (sql, [id], function ()
        { 
          console.log("Employee Records deleted");
        }, error);
      });
    });     
  });

  $.mobile.changePage ($("#dataview"));

}, error);
     });
  });

   function ok ()
  {
   }

   function error (transaction, err) 
  {
   alert ("DB error : " + err.message);
  return false;
  }

【问题讨论】：

this $(".delete").bind ("swiperight", function (event) to this $(document).on("swiperight", ".delete" , function (event) 因为它是动态添加的。还有这个$("#dataview").unbind ().bind ("pagebeforeshow", function () 到$("#dataview").on("pagebeforeshow", function ()。
您可以在jsfiddle.net 上发布您的代码吗？
@SergePashkevich 我解决了我的问题。
据我所知，在此处单独发布您的答案并接受它是一种很好的做法。人们可能会遇到与您相同的问题。

标签： jquery-mobile reload web-sql delete-row jquery-mobile-listview

【解决方案1】：

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

只需将此添加到您的删除事件中。你没有。请记住，如果您附加或删除某些内容，则使用上面的代码。如果您只想刷新而不附加，请使用以下内容：

$('#your_ul_id').listview();

【讨论】：