面板将无法打开，pageinit将不会触发

Question

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

我得到的错误是：“对象[object Object}没有方法'panel'”

我有一个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移动设备已经加载了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>

finnaly我在指向面板的'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>