2012-05-16 4 views
0

Я использую JQuery для создания html-страниц. First.html Second.html<a href=""> не выполняет скрипт целевой страницы html

Я дал одну ссылку href для second.html. когда я нажимаю на эту ссылку, показывая вторую страницу. Проблема: 1. Секция скрипта second.html не выполняется. 2. Когда я вижу источник просмотра second.html, он показывает мне contect of first.html

, когда я непосредственно вызываю его. Пожалуйста, помогите мне. Я не уверен, почему так происходит.

Firstpage.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title> 
     </title> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 

     <style> 
      /* App custom styles */ 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
     </script> 
     <script src="js/jquery.mobile-1.1.0.js"> 
     </script> 


    </head> 
    <body> 
     <div data-role="page" id="page1"> 
      <div data-theme="a" data-role="header" data-position="fixed">   
       <h5> 
        Demo 
       </h5> 
      </div> 


      <div data-role="content" align="center"> 
       <div> 
         <span id="device_used"></span><br/> 
         <a href="homepage.html" > 
         MyHCL 
        </a> 
       </div> 
      </div> 
     </div> 
     <script> 
      var device; 
      if(navigator.userAgent.match(/Android/i)) 
       device= 'Android'; 
      else if(navigator.userAgent.match(/webOS/i)) 
       device= 'webOS'; 
      else if (navigator.userAgent.match(/iPhone/i)) 
       device= 'iPhone'; 
      else if(navigator.userAgent.match(/iPad/i)) 
       device= 'iPad'; 
      else if (navigator.userAgent.match(/iPod/i)) 
       device= 'iPod'; 
      else if(navigator.userAgent.match(/BlackBerry/i)) 
       device= 'BlackBerry'; 
      else if(navigator.userAgent.match(/Windows/i)) 
       device= 'Windows'; 
      else 
       device=' not detected'; 

      document.getElementById("device_used").innerHTML=device; 
      // alert(navigator.userAgent); 
      var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/); 

      //alert(isMobile); 
     </script> 
    </body> 
</html> 

Secondpage.html

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 
     <title> 
     </title> 
      <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /> 

     <style> 
      /* App custom styles */ 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
     </script> 
     <script src="js/jquery.mobile-1.1.0.js"> 
     </script> 
     <link rel="STYLESHEET" type="text/css" href="js/codebase/dhtmlxgrid.css"> 
<link rel="stylesheet" type="text/css" href="js/codebase/skins/dhtmlxgrid_dhx_skyblue.css"> 
<script src="js/codebase/dhtmlxcommon.js"></script> 
<script src="js/codebase/dhtmlxgrid.js"></script>   
<script src="js/codebase/dhtmlxgridcell.js"></script> 
<script> 

     $(document).bind("pageinit", function() { 
     alert("Script executing"); 
        $('#HR_content').hide(); 
        $('#Carrier_content').hide(); 
        $('#Trasaction_content').hide(); 

        $('#Trasaction').click(function() { 
          $('#HR_content').hide(); 

          $('#Carrier_content').hide(); 

          $('#Trasaction_content').show(); 
        }); 

        $('#Carrier').click(function() { 
         $('#HR_content').hide(); 

         $('#Trasaction_content').hide(); 

         $('#Carrier_content').show(); 
        }); 



        $('#HR').click(function() { 

          $('#Trasaction_content').hide(); 

          $('#Carrier_content').hide(); 

          $('#HR_content').show(); 

        }); 


      var device; 
      if(navigator.userAgent.match(/Android/i)) 
       device= 'Android'; 
      else if(navigator.userAgent.match(/webOS/i)) 
       device= 'webOS'; 
      else if (navigator.userAgent.match(/iPhone/i)) 
       device= 'iPhone'; 
      else if(navigator.userAgent.match(/iPad/i)) 
       device= 'iPad'; 
      else if (navigator.userAgent.match(/iPod/i)) 
       device= 'iPod'; 
      else if(navigator.userAgent.match(/BlackBerry/i)) 
       device= 'BlackBerry'; 
      else if(navigator.userAgent.match(/Windows/i)) 
       device= 'Windows'; 


if(device == 'Windows') 
{ 
     $("#Android").hide();  
     $("#iPhone").hide(); 
     $("#iPad").hide();  
} 

if(device == 'Android') 
{ 
     $("#Windows").hide();  
     $("#iPhone").hide(); 
     $("#iPad").hide();  
} 

if(device == 'iPhone') 
{ 
     $("#Android").hide();  
     $("#Windows").hide(); 
     $("#iPad").hide();  
} 

if(device == 'iPad') 
{ 
     $("#Android").hide();  
     $("#Windows").hide(); 
     $("#iPhone").hide(); 
} 

}); 
     </script> 
    </head> 
    <body> 
     <div data-role="page" id="page1"> 
      <div data-theme="a" data-role="header"> 
       <h3> 
        Demo 
       </h3> 
       </div> 

       <br> 
       <div data-role="navbar" data-iconpos="left"> 
        <ul> 
         <li id="Trasaction"> 
          <a href="#page1" data-theme="" data-icon="" > 
           Trasaction 
          </a> 
         </li> 
         <li id="Carrier"> 
          <a href="#page1" data-theme="" data-icon=""> 
           Carrier 
          </a> 
         </li> 
         <li id="HR"> 
          <a href="#page1" data-theme="" data-icon=""> 
           HR 
          </a> 
         </li> 
        </ul> 
       </div> 

      <div data-role="content" id="Trasaction_content" > 
       <h3> 
        <div id="My_Approvals"> <a href="homepage.html" data-transition="pop">My Approvals</a></div> 
       </h3> 
       <h3> 
        <div id="ECS" > <a href="ECS.html" data-transition="pop">Expense Claim System</a></div> 
       </h3> 
       <h3> 
        <div id="Geo_LMS"><a href="homepage.html" data-transition="pop">Geo LMS</a></div> 
       </h3> 
       <h3> 
        <div id="TAS"> <a href="homepage.html" data-transition="pop">My Travel(TAS)</a></div> 
       </h3> 
       <h3> 
        <div id="Windows"> <a href="homepage.html" data-transition="pop">Windows</a></div> 
       </h3> 
       <h3> 
        <div id="iPad"> <a href="homepage.html" data-transition="pop">IPAD</a></div> 
       </h3> 
       <h3> 
        <div id="Android"> <a href="homepage.html" data-transition="pop">Android</a></div> 
       </h3> 
       <h3> 
        <div id="iPhone"> <a href="homepage.html" data-transition="pop">iPhone</a></div> 
       </h3> 
      </div> 

       <div data-role="content" id="Carrier_content"> 
       <h3> 
        <a href="homepage.html" data-transition="pop">Appraisal Review(i4Excel)</a> 
       </h3> 
       <h3> 
        <a href="homepage.html" data-transition="pop"> My Profile (ESS)</a> 
       </h3> 
       <h3> 
        <a href="homepage.html" data-transition="pop"> Performance Appraisal (I4EXCEL)</a> 
       </h3> 
       <h3> 
        <a href="homepage.html" data-transition="pop">My Skill Profile (SPS)</a> 
       </h3> 
      </div> 

       <div data-role="content" id="HR_content"> 
       <h3> 
        <a href="homepage.html" data-transition="pop">Payroll Input System</a> 
       </h3> 
       <h3> 
        <a href="homepage.html" data-transition="pop">Smart Recruit</a> 
       </h3> 
       <h3> 
        <a href="homepage.html" data-transition="pop"> Transfer Management System</a> 
       </h3> 
       <h3> 
        <a href="homepage.html" data-transition="pop"> Vehicle Declaration</a> 
       </h3> 
      </div> 


     </div> 

    </body> 
</html> 

ответ

1

если вы используете JQuery мобильный телефон вы не должны использовать $(document).ready() использовать $(document).bind('pageinit') вместо этого.

$(document).raedy() Событие запускается только один раз, когда загружается первая страница. Любые последующие страницы загружаются с использованием вызовов AJAX, следовательно, никакого события document.ready.

+0

Его я изменил свое мероприятие так, как вам было предложено, но все-таки у меня такая же проблема, проверит ли мой код. Я его оптимизировал – Pedantic

+0

Да, я решил. Thks – Pedantic

Смежные вопросы