Jquery mobile 重新加载页面后Listview不刷新，在jquery mobile中删除列表后无法从Listview中删除_Jquery Mobile_Reload_Web Sql_Delete Row_Jquery Mobile Listview

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

jquery-mobile

Jquery mobile 重新加载页面后Listview不刷新，在jquery mobile中删除列表后无法从Listview中删除,jquery-mobile,reload,web-sql,delete-row,jquery-mobile-listview,Jquery Mobile,Reload,Web Sql,Delete Row,Jquery Mobile Listview,您好，我正在参加创建和检索数据使用。它的功能正常工作，我期待当我在列表视图的下一页中显示结果时，结果显示正确，但当我刷新页面列表视图时，结果显示不正确。仅转到上一页，然后转到此页面。当我单击“删除”按钮时，我还在列表视图中添加了一个“删除”按钮。记录被删除。但列表未从列表视图中删除，则仅转到上一页仅删除此页。如何解决这个问题这是我的密码： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Conten

您好，我正在参加创建和检索数据使用。它的功能正常工作，我期待

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

这是我的密码：

<!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;
  }

$‘您的ul_id’。列表视图‘刷新’

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

$'your_ul_id'。列表视图

此$.delete.bind SwiperRight函数事件到此$document.onswiperight.delete函数事件，因为它是动态添加的。还有这个$dataview.unbind.bind pagebeforeshow，函数到$dataview.onpagebeforeshow，函数。你能在上面发布代码吗？@SergePashkevich我修复了我的问题。我知道，在这里单独发布你的答案并接受它是一个很好的做法。人们可能会有和你一样的问题。