2015-04-07 156 views
-1

我試圖構建一個工作的外部面板,但遇到一些問題。這裏的HTML:jQuery Mobile Undefined不是函數

<html> 
    <head> 
     <title>My Page</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
     <script> 
     /* add panel */ 
      $(document).on("mobileinit" , function() { 
       var panel = '<div>panel</div>'; 
       $("body").prepend(panel); /* or .append */ 
      }); 
     </script> 
     <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
     <script> 
     /* initialize panel and contents */ 
      $(function() { 
       $("[data-role=panel]").panel().enhanceWithin(); /* or #panelID or .class */ 
      }); 
     </script> 
    </head> 
    <body> 
     <div data-role="panel" class="panel left panel-01" data-position="left" data-display="push" id="panel-01"> 
      <ul data-role="listview" data-theme="a"> 
       <li><a href="#profile">My Profile</a></li> 
       <li><a href="#">Recent Activities</a></li> 
       <li><a href="#">FAQ </a></li> 
       <li><a href="#">Terms and Use</a></li> 
       <li><a href="#">Full Site</a></li> 
       <li><a href="#">About Us</a></li> 
       <li><a href="#">Contact Us</a></li> 
       <li><a href="#">Privacy Policy</a></li> 
      </ul> 
     </div> 

     <div data-role="page" id="home" data-position="fixed"> 
       <div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a> 

       <h1>Home</h1> 
      </div> 
      <div data-role="content" class="content">content 
       <div data-role="listview" style="margin:1em; border-radius:10px;"> 
        <ul data-role="listview" style="margin:1em; border-radius:10px;"> 
         <li><a href="#about">About us</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
     <div data-role="page" id="about" data-position="fixed"> 
      <div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a> 

       <h1>About us</h1> 

      </div> 
      <div data-role="content" class="content">About us 
       <div data-role="listview" style="margin:1em; border-radius:10px;"> 
        <ul data-role="listview" style="margin:1em; border-radius:10px;"> 
         <li><a href="#home">Home</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <div data-role="footer"> 
       <!--<h4>Footer</h4>-->footer</div> 
     </div> 
     <div data-role="page" id="profile" data-position="fixed"> 
      <div data-role="header"> <a href="#panel-01" class="menuIcon ico fl">menu</a> 

       <h1>My Profile</h1> 

      </div> 
      <div data-role="content" class="content">About us 
       <div data-role="listview" style="margin:1em; border-radius:10px;"> 
        <ul data-role="listview" style="margin:1em; border-radius:10px;"> 
         <li><a href="#home">Profiles</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

我在Chrome測試這一點,我越來越:

Uncaught TypeError: undefined is not a function 

的代碼是從不同的來源中獲得,但似乎是加載外部面板的典型例子。

如何更正「未定義函數」錯誤?

回答

1

你必須包括jQuery Mobile的前on()

<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> 
<script> 
/* add panel */ 
$(document).on("mobileinit" , function() { 
var panel = '<div>panel</div>'; 
$("body").prepend(panel); /* or .append */ 
}); 
</script> 
+0

的錯誤不是第一個劇本,它的第二:$(函數(){$(「[數據角色=面板]「).panel()。enhanceWithin(); ... –

+0

確認:這不能解決錯誤。 –

相關問題