Question

我正在参与移动页面更改事件时传递查询字符串值，并按预期检索值。但是当我单击“后退”按钮时，在当前页面和上一页同时触发时转到上一页。如何解决这个问题

这是我的代码：

page1.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Client View</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).bind('pageinit','div:jqmData(role="page")', function(){

$("#searchbutton").on('click',function(){
    ///alert("working");
       var searchvalue = $("[name='clientsearch']").val();
      var searchbyvalue = $("#select-choice-searchby").val();
      var statusvalue = $("#select-choice-status").val();

   if(searchvalue.length!=0){
       $.mobile.changePage(
     'accountlist.html',
    { 
     //dataUrl : "accountlist.html?searchvalue="+searchvalue&"searchbyvalue="+searchbyvalue&"statusvalue="+statusvalue , 
    data : { 'searchvalue' : searchvalue,'searchbyvalue':searchbyvalue,'statusvalue':statusvalue }, 
    reloadPage : false, 
    changeHash : true,


    });
  }
  else{
      $( "#confirm" ).popup( "open" );
  }
  });
    });
    </script>
    </head>

    <body>
      <div data-role="page" id="client"  >

     <script type="text/javascript">
  $(document).on("pageshow", function(){
    var prevSelection = "tab1";
    $("#navbar ul li").on("click",function(){

        var newSelection = $(this).children("a").attr("data-tab-class");
        $("."+prevSelection).addClass("ui-screen-hidden");
        $("."+newSelection).removeClass("ui-screen-hidden");
        prevSelection = newSelection;
    });
      });

 </script>
 <div data-role="header" data-theme="b" data-position="fixed" data-id="persistantFooter">
     <a href="#"  data-icon="back" data-rel="back"  title="Go back">Back</a>
    <h1>Client View</h1>
</div>
<div data-role="content">
    <div data-role="fieldcontain" id="searchbox">
         <input type="search" name="clientsearch" value="" data-inline="true" data-mini="true"/>
         <a href="#" data-role="button"  data-theme="b" data-inline="true" id="searchbutton" data-ajax="false"  data-mini="true" >Search</a>
    </div>
    <div data-role="fieldcontain"  >
         <label for="select-choice-searchby"  class="select searchby" data-inline="true"  style="text-align:right">Search By:</label>
         <select name="select-choice-searchby" id="select-choice-searchby" data-mini="true"  data-role="none"  style="margin-left:30px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;
height: 28px;">
            <option value="account">Account</option>
            <option value="customhouseholds">Custom Households </option>
            <option value="roahouseholds">ROA Households</option>
        </select>
        </div>
        <div data-role="fieldcontain"  >
        <label for="select-choice-status"  class="select status" data-inline="true" style="text-align:right!important" >Status:</label>
        <select name="select-choice-status" id="select-choice-status"  data-mini="true"  data-role="none" style="margin-left:58px;border: 2px solid #999;border-radius:5px; width:60%;background:#D3D3D3; font-size: 16px;height: 28px;">
            <option value="open">Open</option>
            <option value="closed">Closed </option>
            <option value="all">All</option>
        </select>
    </div>
    <div data-role="navbar" id="navbar">
            <ul>
                <li><a href="#" class="ui-btn-active" data-tab-class="tab1">Favorites</a></li>
                <li><a href="#" data-tab-class="tab2">Recents</a></li>

            </ul>
        </div> 

    <div class="tab-content">
             <div class="tab1">
               <div data-demo-html="true" id="a" class="content_div">   
                    <ul data-role="listview" data-inset="true"> 
                        <li >
                            <a href="#">
                            <h3 class="ui-li-heading">Client Name</h3>
                            <p class="ui-li-desc">Account</p></a></li>  

                        <li>
                            <a href="#">
                            <h3 class="ui-li-heading">HouseHold Name</h3>
                            <p class="ui-li-desc">Custom HouseHold</p></a></li> 
                        <li>
                             <a href="#">
                            <h3 class="ui-li-heading">HouseHold Name</h3>
                            <p class="ui-li-desc">Custom HouseHold</p></a></li> 

                    </ul>   
         </div><!--/demo-html -->   
            </div>
            <div class="tab2 ui-screen-hidden">
               <div data-demo-html="true" id="a" class="content_div">   
                    <ul data-role="listview" data-inset="true"> 
                        <li >
                            <a href="#">
                            <h3 class="ui-li-heading">Client Name</h3>
                            <p class="ui-li-desc">Account</p></a></li>  
                        <li>
                            <a href="#">
                            <h3 class="ui-li-heading">HouseHold Name</h3>
                            <p class="ui-li-desc">Custom HouseHold</p></a></li> 


                    </ul>   
           </div>
            </div>
    </div>
          </div>
            <div id="confirm" data-role="popup" data-theme="none">
              <p id="question">Please Give Some Value</p>
                <a id="yes" data-role="button" data-mini="true" data-shadow="false" data-      transition="flip"  data-theme="b" data-rel="back">Ok</a>

</div><!-- /popup -->
      </div>
           </body>
         </html>

page2.html

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

<body>
 <div data-role="page" id="accountlist"  data-prefetch>
  <script src="js/sai.js"></script>


  <div data-role="header" data-theme="b">
    <a href="#" data-icon="back" data-rel="back"  data-ajax="false" data-direction="reverse" title="Go back">Back</a>
        <h3>Account View</h3>
    </div>
    <div data-role="content">
            <ul id="list" data-role="listview" >
            </ul>
    </div> <!--content-->
</div><!--page-->

Answer 1

将jquery函数更改为此并尝试

$("#navbar ul li").on("click","a",function(){

    var newSelection = $(this).attr("data-tab-class");
    $("."+prevSelection).addClass("ui-screen-hidden");
    $("."+newSelection).removeClass("ui-screen-hidden");
    prevSelection = newSelection;
});

data-ajax =“false”在jquery mobile中无法正常工作

1 个答案: