Question

我试图使用

触发面板的打开

$("#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>

编辑：根据Alexanders的建议，为了清楚起见修改了问题。 EDIT2：还添加了相关的头部分，以便您可以看到正在使用的版本。

Answer 1

在开放功能之前，您是否先创建了方法？

以下是如何执行此操作的示例：panel-swipe-open

$( 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" );
            }
        }
    });
});

Answer 2

事实证明这里的问题是

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

标签。要求无法正确加载干扰事件系统的内容。没有需要的测试可以解决问题。

调用.panel（）函数时，jQuery Mobile Panel小部件抛出错误（1.4.5，jquery 1.11.1）

2 个答案: