1

我正在尝试创建一个应用程序，该应用程序在单页模板架构中具有三个页面，第一页包含登录页面，我正在使用

$.mobile.changePage('xxxx.php'); 为了在第二页中导航其正常工作，我从那里有列表视图，我正在使用导航到另一个页面

$.mobile.changePage('xxxx.php'); 为了回到上一页，我正在使用这个$.mobile.changePage('xxxx.php');

但是，当我在单击委托方法上转到上一页列表视图时，任何其他方法都不起作用。但它在我刷新页面后工作。

下面是我的代码。任何建议都会很棒。

第二页.php

<!DOCTYPE html>
<html>
 <head>

 <title> Management</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery Mobile</title>
 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

   <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

 <link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" />

<script src="./js/jquery.mobile-1.3.1.min.js"></script>

</head>
<body >
<div data-role="page" id="demo-page"  >

<div data-role="header"  id="header" data-position="fixed" data-tap-toggle="false" data-fullscreen="true"  data-theme="a"  >  <!-- data-position="fixed" data-tap-toggle="false" -->


 <a href="#menu" data-role="button" data-inline="true"  data-icon="bars" data-iconpos="notext" class="ui-btn-left" ></a>
 <a href="" id="edit" data-role="button" data-inline="true"  class="ui-btn-right">Edit</a>

<h1 style="font-size:14px;">Event Management</h1>

</div>

<div data-role="content" id="content"  >

<div id="listdiv" style="margin-top:15%;margin-bottom:10%;">

     <ul  data-role="listview" id="list" class="ui-listview " data-split-icon="delete"  data-filter="true" data-filter-placeholder="Search..." >

  <li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read">
<a   href=" "  data-transition="slide" >list1</a><a class="deleteMe"></a>
</li>
 <li data-icon="false" data-name="<?php echo $token_res['event_name'];?>" value="<?php echo $token_res['msg_body'];?>" id="read">
<a   href=" "  data-transition="slide" >list2</a><a class="deleteMe"></a>
</li>
 </ul>
</div>
 </div><!--end of content -->
  <script>

  $("#list").delegate('li',"click",function(){

  var ki=$(this).attr('data-name');

    //alert("clicked"+$(this).attr('data-name')+$(this).attr('value'));
     $( document ).one( "pagechange", function() {
      $.mobile.changePage("edit.php",{type:'post',transition: "slide", data:    {'param1':ki}});
        });

  }); 
    $(document).ready(function() { 

  });
  </script>
  <div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true"   data-position="fixed" data-tap-toggle="false"   style="  bottom:0; width:100%;">

  </div>

 </div><!--end of page -->

 </body>
 </html>

第三页.php

     <!DOCTYPE html>
    <html>
    <head>

    <title>Management</title>


      <meta name="viewport" content="width=device-width, initial-scale=1">
       <title>jQuery Mobile</title>
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

      <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

         <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />

     <link rel="stylesheet" href="./js/jquery.mobile-1.3.1.min.css" />

     <script src="./js/jquery.mobile-1.3.1.min.js"></script>

     </head>
      <body >
       <div data-role="page" id="demo-page1"  >

       <div data-role="header"  id="header"   data-position="fixed"  data-tap-toggle="false" data-fullscreen="true"  data-theme="a"  >  

        <a href="" data-role="button"    id="mback" data-inline="true"  class="ui-btn-left" >Back</a>
       <a href="" id="medit" data-role="button" data-inline="true"  class="ui-btn-right" >Edit</a>

      <h1 style="font-size:14px;">Management</h1>

        </div>
         <div data-role="content" id="content"  >

      <ul data-role="listview" data-inset="true" style="margin-top:10%;margin-bottom:10%;" >
         <li data-role="fieldcontain">
        <label for="eventbody">Message-Body</label>
       <input type="text" id="eventbody" value=<?php echo decode($_REQUEST['msg_body']);?> >
       </li>
         <li data-role="fieldcontain">
        <label for="eventname">Message-Body</label>
      <input type="text" id="eventname" value=<?php echo decode($_REQUEST['event_name']);?> >
     </li>
          <li data-role="fieldcontain">
      <label for="sdate">Message-Body</label>
     <input type="text" id="sdate" value=<?php echo decode($_REQUEST['sdate']);?> >
      </li>
       <li data-role="fieldcontain">
       <label for="edate">Message-Body</label>
         <input type="text" id="edate" value=<?php echo $_REQUEST['param1'];?> >
           </li>

         <li data-role="fieldcontain" id="nouse" style="display:none;">

          <input type="text" id="eid" value=<?php echo decode($_REQUEST['id']);?> >
         </li>
        <li >
       <fieldset class="ui-grid-a">
                    <div class="ui-block-a"><button type="submit" id="mcancel" data-theme="d">Cancel</button></div>
                    <div class="ui-block-b"><button type="submit" data-theme="a">Submit</button></div>
            </fieldset>
        </li>

       </ul>

 </div><!--end of content -->

       <div data-role="footer" id="mainfooter" data-theme="a" data-fullscreen="true"   data-position="fixed"  data-tap-toggle="false"   style="  bottom:0; width:100%;">

       </div>

      <script>

      $("#mback").click(function(){
       alert("alert");
       if($("#mback").text()=='Back'){
      //e.preventDefault();
        var page = document.referrer;
    $.mobile.changePage("home.php",{
        transition: 'slide',
     reloadPage:true,
        reverse: true
    });

     }else{

      $("#eventbody").attr("readonly", "readonly");
      $("#eventname").attr("readonly", "readonly");
      $("#sdate").attr("readonly", "readonly");
      $("#edate").attr("readonly", "readonly");

      $("#medit .ui-btn-text").text("Edit");
     $("#mback .ui-btn-text").text("Back");
     $('#mback .ui-btn-text').button('refresh');
     $("#medit .ui-btn-text").button('refresh');

     }

     });
      $(document).ready(function() { // <-- ensures the DOM is ready

      });
      </script>

     </div><!--end of page -->

    </body>
    </html>
4

2 回答 2

1

我将点击方法上的列表委托从 id 更改为 class 然后它按照链接答案的建议正常工作

于 2013-07-24T09:40:28.713 回答
0

为什么不使用自动返回功能。只需在 jquery-1.9.1.min.js 之后和 jquery.mobile-1.3.1.min.js 之前的脚本中添加这个：

$.mobile.page.prototype.options.addBackBtn = true; $.mobile.page.prototype.options.backBtnText = "返回";

然后它会自动在除第一页之外的每一页上添加后退按钮标记，并向后路由到前一页。

于 2013-07-24T08:34:06.780 回答