jQueryMobile：註冊onload，onsmit事件的問題

我正在使用jquery.mobile-1.0b3庫。我有home.html，contactus.html。下面是示例代碼：（我沒有收到在contactus.html警報）jQueryMobile：註冊onload，onsmit事件的問題

home.html 
========= 
    <!DOCTYPE html> 
    <html> 
     <head> 
     <title>Home</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.css" /> 
     <script src="jquery.mobile-1.0b3/jquery-1.6.2.min.js"></script> 
     <script src="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.js"></script> 
    <!-- 
     <link rel="stylesheet" href="css/jquery.mobile-1.0a1.min.css" /> 
     <script src="js/jquery-1.4.3.min.js"></script> 
     <script src="js/jquery.mobile-1.0a1.min.js"></script> 

    --> 
     <link href="css/main.css" rel="stylesheet" type="text/css" /> 

     <script>  
     // Global declarations - assignments made in $(document).ready() below 
     var hdrMainvar   = null; 
     var contentMainVar  = null; 
     var ftrMainVar   = null; 
     var contentTransitionVar= null; 

     var nameLabelVar  = null; 
     var emailLabelVar  = null; 
     var subjectLabelVar  = null; 
     var messageLabelVar  = null; 
     var emailcopyLabelVar = null; 

     var messageVar   = null; 

     var contactformVar = null; 
     var confirmationVar = null; 
     var contentDialogVar = null; 
     var hdrConfirmationVar = null; 
     var contentConfirmationVar = null; 
     var ftrConfirmationVar = null; 
     var inputMapVar = null; 

     // Constants 
     var MISSING = "missing"; 
     var EMPTY = ""; 
     var NO_STATE = "ZZ"; 



     $(document).ready(function() { 
     // Assign global variables 
      //hdrMainVar = $('#hdrMain'); 
      alert("page loaded"); 
      contentMainVar  = $('#contentMain'); 
      ftrMainVar   = $('#ftrMain'); 
      contentTransitionVar = $('#contentTransition'); 

      nameLabelVar  = $('#nameLabel'); 
      emailLabelVar  = $('#emailLabel'); 
      subjectLabelVar = $('#subjectLabel'); 
      messageLabelVar = $('#messageLabel'); 
      //emailcopyLabelVar = $('#emailcopyLabel'); 

      messageVar  = $('#message'); 

      contactformVar = $('#contactform'); 
      confirmationVar = $('#confirmation'); 
      contentDialogVar = $('#contentDialog'); 
      //hdrConfirmationVar = $('#hdrConfirmation'); 
      contentConfirmationVar = $('#contentConfirmation'); 
      ftrConfirmationVar = $('#ftrConfirmation'); 
      inputMapVar = $('input[name*="_r"]'); 

      hideContentDialog(); 
      hideContentTransition(); 
      hideConfirmation(); 


     $('#buttonOK').click(function() { 
      hideContentDialog(); 
      showMain(); 
      return false;  
     }); 


     contactformVar.submit(function() { 
      var err = false; 
      // Hide the Main content 
      hideMain(); 

      // Reset the previously highlighted form elements    
      inputMapVar.each(function(index){    
       $(this).prev().removeClass(MISSING); 
      }); 

      // Perform form validation 
      inputMapVar.each(function(index){ 
      if($(this).val()==null || $(this).val()==EMPTY){ 
       $(this).prev().addClass(MISSING);    
       err = true; 
       }   
      }); 
      if(messageVar.val()==null||messageVar.val()==EMPTY){ 
       messageLabelVar.addClass(MISSING); 
       err = true; 
      } 

      // If validation fails, show Dialog content 
      if(err == true){    
       showContentDialog(); 
       return false; 
      }   

      // If validation passes, show Transition content 
      showContentTransition(); 

      // Submit the form 
      $.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){ 
       confirmationVar.text(data); 
       hideContentTransition(); 
       showConfirmation(); 
      });   
      return false;  
     });  


     }); 


     function hideMain(){ 
     //hdrMainVar.hide(); 
     contentMainVar.hide(); 
     ftrMainVar.hide(); 
     } 

     function showMain(){ 
     //hdrMainVar.show(); 
     contentMainVar.show(); 
     ftrMainVar.show(); 
     } 

     function hideContentTransition(){ 
     contentTransitionVar.hide(); 
     }  

     function showContentTransition(){ 
     contentTransitionVar.show(); 
     } 

     function hideContentDialog(){ 
     contentDialogVar.hide(); 
     } 

     function showContentDialog(){ 
     contentDialogVar.show(); 
     } 

     function hideConfirmation(){ 
     //hdrConfirmationVar.hide(); 
     contentConfirmationVar.hide(); 
     ftrConfirmationVar.hide(); 
     } 

     function showConfirmation(){ 
     hdrConfirmationVar.show(); 
     contentConfirmationVar.show(); 
     ftrConfirmationVar.show(); 
     } 


     </script> 

    </head> 
    <body> 

    <div data-role="page"> 
     <div data-role="header" data-theme="b"> 
      <h1>Home</h1> 
     </div> 
     <div data-role="content"> 
      <div id="banner"> 
       <h2>test</h2> 
      </div> 
      <p> 
       home page content... 
      </p> 
      <ul data-role="listview"> 
       <li><a href="contactus.html">Contact Us</a> 
      </li></ul> 
     </div><!-- /content --> 

    </div> 


    </body> 
    </html> 
contactus.html 
============== 
    <!DOCTYPE html> 
    <html> 
     <head> 
     <title>Contact Us</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <link rel="stylesheet" href="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.css" /> 
     <script src="jquery.mobile-1.0b3/jquery-1.6.2.min.js"></script> 
     <script src="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.js"></script> 
     <style type="text/css"> 
      label.missing { 
       color:#FF0000; 
       font-weight:bold; 
      } 
     </style> 

    </head> 
    <body> 

    <div data-role="page" id="page1"> 
     <div data-role="header" data-theme="b" > 
      <a href="home.html" rel="external" data-icon="back" data-transition="slide">Back</a> 
      <h1>contactus</h1> 
     </div> 
     <div data-role="content" id="contentMain" name="contentMain"> 
      <div id="banner">   
       <h2>Contact Us</h2> 
      </div> 
      <form id="contactform"> 
       <div id="nameDiv" data-role="fieldcontain"> 
        <label for="name">Enter your Name*</label>  
        <input id="name" name="name_r" type="text" /> 
       </div> 

       <div id="emailDiv" data-role="fieldcontain"> 
        <label for="email">E-mail address*</label>  
        <input id="email" name="email_r" type="text" /> 
       </div> 

       <div id="subjectDiv" data-role="fieldcontain"> 
        <label for="subject">Message Subject*</label>  
        <input id="subject" name="subject_r" type="text" /> 
       </div> 

       <div id="messageDiv" data-role="fieldcontain"> 
        <label id="messageLabel" for="message">Enter your Message*</label> 
        <textarea cols="40" rows="10" id="message" name="message_r"></textarea> 
       </div> 

       <!-- <div id="emailcopyDiv" data-role="fieldcontain">    
        <input type="checkbox" id="emailcopy" name="emailcopy"> 
        <label id="emailcopyLabel" for="emailcopy">E-mail a copy of this message to your own address</label> 
       </div> --> 

       <div id="submitDiv" data-role="fieldcontain">  
        <input type="submit" value="Send" data-inline="true"/> 
       </div> 

      </form> 
     </div><!-- contentMain --> 


     <div data-role="content" align="center" id="contentDialog" name="contentDialog"> 
      <div>Please fill in all required fields before submitting the form.</div> 
      <a id="buttonOK" name="buttonOK" href="#page1" data-role="button" data-inline="true">OK</a> 
     </div> <!-- contentDialog --> 

     <!-- contentTransition is displayed after the form is submitted until a response is received back. --> 
     <div data-role="content" id="contentTransition" name="contentTransition"> 
      <div align="center"><h4>Your message has been sent. Please wait.</h4></div> 
      <div align="center"><img id="spin" name="spin" src="img/wait.gif"/></div> 
     </div> <!-- contentTransition --> 

     <div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">  
      <p>Email Sent Successfully</p> 
     </div><!-- contentConfirmation --> 

     <div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div> 

    </div> 


    </body> 
    </html>

來源

2011-09-09 Venkat Papana

在contactus.html刪除javascript

<script> 
$(document).ready(function() { 
    alert("page loaded"); 
    $('#contactform').submit(function() { 
     alert("form submitted"); 
    }); 

}); 
</script>

這需要被添加到home.html這樣的：

$('#page1').live('pagecreate',function(event){ 
    alert('page loaded'); 
    $('#contactform').submit(function() { 
     alert("form submitted"); 
    }); 
});

來源

2011-09-09 19:21:21

HI Phill，它仍然無法正常工作，在主頁加載後我收到「頁面加載」警報，但我無法在聯繫人頁面中看到「」表單已提交「 –

需要查看contactus.html的更多代碼，也許jsfiddle.net或發佈鏈接到源代碼？ –

嗨Phill，我用我的確切代碼更新了我原來的問題。 –

jQueryMobile：註冊onload，onsmit事件的問題

回答

相關問題