jQuery Mobile Panel widget 在调用 .panel(） 函数(1.4.5，jquery 1.11

jQuery Mobile Panel widget throws error when calling .panel() function (1.4.5, jquery 1.11.1)

本文关键字：Mobile jquery 函数 widget 调用 panel jQuery Panel      更新时间：2023-09-26

>我正在尝试使用

$("#searchpanel").panel("open");

方法。 它抛出一个 

 Uncaught TypeError: undefined is not a function

错误，因为 .panel（） 作为方法存在于该对象上。

这是 HTML 代码：

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
    <link rel="stylesheet" href="css/themes/db.css" />
    <style>@import "css/bible.css";</style>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
    <script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>
    <style>
        .panel-content { padding:3px; }
        .ui-btn-text { font-size: .75em;}
        h3 { font-size: 1em;}
        p {font-size: .8em;}
        .ui-submit  .ui-btn-inner .ui-btn-text { font-size: 1.2em;}
        .ui-submit {height:35px;}
    </style>
</head>
<body>
    <div data-role="page">
        <div data-role="header" data-theme="a">
            <div class="ui-grid-c my-breakpoint">
                <div class="ui-block-a"><a id="menuicon" href="#defaultpanel"></a></div>
                <div class="ui-block-b"><input id="searchvalue" type="search" /></div>
                <div class="ui-block-c"><input value="Search" type="submit" id="searchbtn" /></div>
                <div class="ui-block-d"><a id="searchicon" href="#searchpanel"></a></div>
            </div>
        </div>

        <div data-role="content">
            <div id="resultwrap">
                <ul id="result"></ul>
            </div><!-- /content -->
        </div>
        <div data-role="panel" id="searchpanel" data-theme="a" data-position="right" data-display="overlay">
            <div class="panel-content">
                <h3>Search Results: <span id="searchTotal"></span></h3>
                <div id="searchresults"></div>
            </div>
        </div>
        <div data-role="panel" id="defaultpanel" data-theme="a">
            <div class="panel-content">
                <h3>Settings</h3>
            </div>
        </div>
    </div><!-- /page -->
</body>

编辑：根据下面的亚历山大建议，修改了问题以澄清。EDIT2：还添加了相关的头部部分，以便您可以查看正在使用的版本。

在执行打开函数之前，您是否先创建了方法？

下面是一个关于如何做到这一点的例子：面板滑动打开 

$( document ).on( "pageinit", "#demo-page", function() {
    $( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
        // We check if there is no open panel on the page because otherwise
        // a swipe to close the left panel would also open the right panel (and v.v.).
        // We do this by checking the data that the framework stores on the page element (panel: open).
        if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
            if ( e.type === "swipeleft"  ) {
                $( "#right-panel" ).panel( "open" );
            } else if ( e.type === "swiperight" ) {
                $( "#left-panel" ).panel( "open" );
            }
        }
    });
});

所以事实证明，这里的问题是 

<script data-main="js/main" type="text/javascript" src="js/require-jquery.js"></script>

标记。 要求是无法正确加载干扰事件系统的内容。 无需测试可解决此问题。

相关文章：