jQuery Mobile Undefined不是函数

-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

的代码是从不同的来源中获得，但似乎是加载外部面板的典型例子。

如何更正“未定义函数”错误？

来源

2015-04-07 Ken J

你必须包括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>

来源

2015-04-07 00:56:39 DrKey

的错误不是第一个剧本，它的第二：$（函数（）{$（“[数据角色=面板]“）.panel（）。enhanceWithin（）; ... –

确认：这不能解决错误。 –

jQuery Mobile Undefined不是函数

回答

相关问题