Javascript jQuery Mobile Undefined不是一个函数_Javascript_Jquery

Javascript jQuery Mobile Undefined不是一个函数

javascript jquery

Javascript jQuery Mobile Undefined不是一个函数,javascript,jquery,Javascript,Jquery,我试图建立一个工作的外部面板，但有一些问题。以下是HTML： <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.

我试图建立一个工作的外部面板，但有一些问题。以下是HTML：

<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>

代码来自不同的来源，但似乎是加载外部面板的典型示例

如何更正“undefined function”错误？

在（）上

之前必须包含jQuery mobile


/*添加面板*/
$（文档）.on（“mobileinit”，函数（）{
变量面板=‘面板’；
$（“body”）.prepend（panel）；/*或.append*/
});

错误不在第一个脚本上，而是在第二个脚本上：$（function（）{$（“[data role=panel]”）。panel（）.enhanceWithin（）；。。。

Uncaught TypeError: undefined is not a function

<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>