jquery-mobile - 面板不会打开，pageinit 不会触发

Question

我正在尝试通过代码打开一个 jquery 移动面板，但该方法无法识别。

我得到的错误是：“对象[对象对象}没有方法'面板'”

我有一个 html 页面，由几个 jquery-mobile div 页面和一个外部 javascript 文件组成。

这是js函数：

function open_panel() {

    var selected_child=$('#kids_select').val();
    alert(selected_child);

    $("#mypanel").panel("open");
      //    $("#mypanel").panel().panel("open");




}

$('#mypanel').live('pageinit', function () {
    alert("works");
});

我是另一个学生开始的项目，他在 html head 部分包含了重复的 js 文件。我猜这是因为旧的 jquery mobile 加载了 1.3，但是当我尝试删除一些引用时，设计变得混乱或无法识别其他一些代码。

这是头部：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title></title>
    <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="my.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
    </script>

    <script src="js/js_functions.js" type="text/javascript"></script>

最后，我在指向面板的“a”标签中添加了一个 href 属性，并在函数启动后加载它，但面板的 pageinit 函数不会启动。

我试过了：

$('#mypanel').live('pageinit', function () {
    alert("works");
});

和：

 $('#mypanel').live('pageshow', function () {
        alert("works");
    });

但这不起作用

这是 html 正文的相关部分：（与面板）

 <div data-role="page" id="mainpage">

            <div data-theme="b" data-role="header">
                <h3>
                    Iallow
                </h3>
            </div>

            <div data-role="content" style="text-align: center;">
                <div>

                    <div style="width: 50%; float: left">
                        <label for="NewkidBTN">
                            Click to add new kid</label>
                        <a id="NewkidBTN" data-role="button" data-theme="b" href="#RegisterChild" data-icon="plus"
                            data-iconpos="right">Add Kid</a>
                    </div>

                    <div id="kids_div">

                    </div>
                </div>
                <a onclick="open_panel()" href="#mypanel" data-role="button" data-inline="true" data-icon="bars">Add transaction</a>


            </div>

            <div data-role="panel" id="mypanel">
                    <h3>enter action</h3>
                    <select name="select-type" id="select-type" onclick="return select-type_onclick()">
                        <option value="deposit">deposit</option>
                        <option value="withdrawal">withdrawal</option>
                    </select>
                    <label for="ammount">Write the ammount</label>
                    <input type="number" data-clear-btn="false" name="ammount" id="ammount" value="">
                    <label for="desc" class="ui-hidden-accessible">
                        description:</label>
                    <input type="text" name="desc" id="descTB" value="" placeholder="description" runat="server" />
                    <button id="Button1" type="submit" data-theme="b" data-icon="check" runat="server" onclick="transaction">
                        submit</button>
                </div>

编辑：

我通过删除旧的 jquery mobile 和 jquery 更改了 head 部分。现在面板加载，但我添加到面板的 pageinit 函数不会启动。我尝试了每种语法，例如：

$('#mypanel').live('pageshow', function () {
    alert("works");
});

$('#mypanel').live('pageinit', function () {
    alert("works");

$('#mypanel').on('pageshow', function () {
    alert("works");
});

$('#mypanel').on('pageinit', function () {
    alert("works");
});

也许面板不像 jquery mobile 中的页面那样工作..

头部现在看起来像这样：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" />-->
    <link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />
    <!--<script type="text/javascript" src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>-->
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.core.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.mode.calbox.min.js"></script>
    <script type="text/javascript" src="http://dev.jtsage.com/cdn/datebox/i18n/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title></title>
    <!--<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />-->

    <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>-->
    <!--<script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
    </script>-->

    <script src="js/js_functions.js" type="text/javascript"></script>