为什么loading_page不会先被点击?

时间:2017-09-17 21:00:33

标签: jquery html jquery-mobile

我不明白为什么我的加载页面不是第一个被点击的页面,有人可以向我解释它不是吗? (我一直在看这几个小时,我觉得是时候再买一双眼睛了)

出于某种原因,它总是直接进入thread_page并且错过了loading_page。

    <div id="loading_page" data-role="page" data-theme="a" data-url="loading_page" class="landing_background">
        <!-- <div class="landing_overlay"></div> -->
        <div class="landing_main_logo">
            <img src="logo-with-tag-line.png" />
            <div class="loading-cube">
                <div class="load-cube1 load-cube"></div>
                <div class="load-cube2 load-cube"></div>
                <div class="load-cube4 load-cube"></div>
                <div class="load-cube3 load-cube"></div>
            </div>
        </div>
    </div>
    <div id="thread_page" data-role="page" data-url="thread_page" data-theme="a">
        <div data-role="footer">
            <div data-role="navbar" class="nav-glyphish-example ui-navbar" data-grid="d" role="navigation">
                <ul class="ui-grid-d">
                    <li class="ui-block-a">
                        <a href="#" id="chat" data-icon="camera" data-theme="a" class="ui-btn ui-btn-icon-top ui-btn-up-a">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Chat</span>
                            </span>
                        </a>
                    </li>
                    <li class="ui-block-b">
                        <a href="#" id="email" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Email</span>
                            </span>
                        </a>
                    </li>
                    <li class="ui-block-c">
                        <a href="#" id="skull" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Danger</span>
                            </span>
                        </a>
                    </li>
                    <li class="ui-block-d">
                        <a href="#" id="beer" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Beer</span>
                            </span></a>
                    </li>
                    <li class="ui-block-e">
                        <a href="#" id="coffee" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Coffee</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <script>

        $("#loading_page").bind("pageinit", function(event){
            alert("WOOPS");
        });

    </script>

1 个答案:

答案 0 :(得分:1)

你确定它不起作用吗?我看到了console.log 请注意,pageinitdeprecated since 1.4.0

  

此事件已在1.4.0中弃用,转而使用pagecreate。只是   在上面的例子中替换pageinit。

        $("#loading_page").bind("pageinit", function(event){
            console.log("WOOPS");
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div id="loading_page" data-role="page" data-theme="a" data-url="loading_page" class="landing_background">
        <!-- <div class="landing_overlay"></div> -->
        <div class="landing_main_logo">
            <img src="logo-with-tag-line.png" />
            <div class="loading-cube">
                <div class="load-cube1 load-cube"></div>
                <div class="load-cube2 load-cube"></div>
                <div class="load-cube4 load-cube"></div>
                <div class="load-cube3 load-cube"></div>
            </div>
        </div>
    </div>
    <div id="thread_page" data-role="page" data-url="thread_page" data-theme="a">
        <div data-role="footer">
            <div data-role="navbar" class="nav-glyphish-example ui-navbar" data-grid="d" role="navigation">
                <ul class="ui-grid-d">
                    <li class="ui-block-a">
                        <a href="#" id="chat" data-icon="camera" data-theme="a" class="ui-btn ui-btn-icon-top ui-btn-up-a">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Chat</span>
                            </span>
                        </a>
                    </li>
                    <li class="ui-block-b">
                        <a href="#" id="email" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Email</span>
                            </span>
                        </a>
                    </li>
                    <li class="ui-block-c">
                        <a href="#" id="skull" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Danger</span>
                            </span>
                        </a>
                    </li>
                    <li class="ui-block-d">
                        <a href="#" id="beer" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Beer</span>
                            </span></a>
                    </li>
                    <li class="ui-block-e">
                        <a href="#" id="coffee" data-icon="camera" data-theme="a" class="ui-btn ui-btn-up-a ui-btn-icon-top">
                            <span class="ui-btn-inner">
                                <span class="ui-btn-text">Coffee</span>
                            </span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>