Question

我正在使用jquery开发我的第一个移动网络应用

当我按下按钮转到下一页时，它会发生但页面上的javascript无法正常工作。

这是我的代码，因为之前我的标题是一个PHP文档所以我不必一直记得的header.php

<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">-->
<!DOCTYPE html>
<html manifest="cache.manifest">
<!--<html>-->
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Balti Tandoori</title>

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <link rel="apple-touch-icon" href="iphone.png" />
    <link rel="apple-touch-startup-image" href="startup.png" />
<!--<meta name="apple-mobile-web-app-status-bar-style" content="black" />-->



    <link rel="stylesheet" href="js/jquery.mobile-1.1.0.min.css" />
            <!-- App custom styles -->



     <link rel="stylesheet" href="js/balti.min.css" />
     <link href="css/mobile.css" rel="stylesheet" type="text/css" />

    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery.mobile-1.1.0.min.js"></script> 

            <style type="text/css" media="screen">



        h2 {
            margin: 0;
        }

        .drawers-wrapper {
            position: relative;
            width: 100%;

        }

        .drawer {
        background-color:#ffffff;

            color:#ffffff;
            font-size:20px;
            line-height:1.3em;

        }
<!-- NO REQUIRED -->
        .boxcap {
            height:5px;
            left:0pt;
            position:absolute;
            width:100%;
            z-index:100;
            background:transparent url(http://images.apple.com/downloads/images/sidenav_capbottom.png) no-repeat scroll 0%;
            margin-top:-5px;
        }

        .captop {
            background-image:url(http://images.apple.com/downloads/images/box_188captop.png );
            bottom:auto;
            top:0pt;
            margin-top:0;
        }
<!-- END JUST DOES CORNERS -->
        .drawers {
            margin-bottom:15px;
            color:#76797C;
            font-size:11px;
            line-height: 18px;

        }

        .drawers A {
            color:#666666;
            text-decoration:none;
            font-family:"Lucida Grande",Geneva,Arial,Verdana,sans-serif;
            font-size-adjust:none;
            font-style:normal;
            font-variant:normal;
            font-weight:normal;
        }

        .drawer li {
            border-bottom:1px solid #E5E5E5;
            line-height:16px;
            padding:6px 0pt;
        }

        UL {
            list-style: none;
            padding: 0;
        }

        UL.drawers {
            margin: 0;
        }

        .drawer-handle {
            background-color:#000000;

            color:#ffffff;
            cursor:default;
            font-size:20px;
            font-weight:normal;
            height:50px;
            line-height:25px;
            margin-bottom:0pt;
            text-indent:15px;
            width:100%;
            border:1px solid #ffffff
        }

        .drawer-handle.open {
        background:transparent url(css/body.gif) no-repeat;


        }

        .drawer UL {
            padding: 0 12px;
            padding-bottom:0pt;
        }

        .drawer-content UL {
            padding-top: 7px;
        }

        .drawer-content LI A {
            display:block;
            overflow:hidden;

        }

        .alldownloads li {
            border:0pt none;
            line-height:18px;
            padding:0pt;

        }

        </style>




        <script src="jquery.dimensions.js" type="text/javascript"></script>
    <script src="jquery.accordion.js" type="text/javascript"></script>  






    <!-- link to allow bookmark website -->
    <link rel="stylesheet" href="bookmark/add2home.css">
    <script type="text/javascript">
        var addToHomeConfig = {
        animationIn: 'bubble',
        animationOut: 'drop',
        lifespan:10000,
        expire:2,
        touchIcon:true,
        message:'Add Our Mobile App To Your <strong>%device</strong> Home Page. Available Anytime `%icon`.'
        };
    </script>
    <script type="application/javascript" src="bookmark/add2home.js"></script>
    <!-- bookmark end -->

   <script type="text/javascript">
        $(document).bind("mobileinit", function() {
        $.mobile.page.prototype.options.addBackBtn = true;
        });    
    </script>  
<script type="text/javascript">

$(function () {
  $('UL.drawers').accordion({
    // the drawer handle
    header: 'H2.drawer-handle',

    // our selected class
    selectedClass: 'open',

    // match the Apple slide out effect
    event: 'mouseover'
  });
});

</script>


    </head>

这是我的index.php

<?
require_once("header.php");
?>
<!-- do not touch above -->
    <body>
        <div data-role="page" id="page1" data-theme="f">
            <div data-theme="f" data-role="header">
                <img src="css/logo.gif"width="100%" style="border-bottom :1px solid white" alt="" />
            </div>
         <div data-role="content">
                <ul data-role="listview" data-divider-theme="b" data-inset="true">
                    <li data-theme="b">
                        <a href="menu.php" data-transition="flip">
                            Menu
                        </a>
                    </li>
                    <li data-theme="b">
                        <a href="#page1" data-transition="flip">
                            Opening Times
                        </a>
                    </li>
                    <li data-theme="b">
                        <a href="#page1" data-transition="flip">
                            How To Find Us
                        </a>
                    </li>
                </ul>
                <a data-role="button" data-transition="pop" href="page1" data-theme="b" data-icon="tel" data-iconpos="left">
                    Call Us
                </a>
         <!--   </div>-->


    </div>

            <!-- do not touch below -->

            <div data-theme="b" data-role="footer">
                <h3>
                    &copy; Balti Tandoori
                </h3>
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>

这是索引调用javascript不运行的页面，如果我从这样的按钮禁用ajax调用它会运行但是我希望ajax也可以工作，我如何回想起加载时的javascript等

<a href="javascript:window.location.href='menu.php'"  data-ajax='false'

menu.php

<?
require_once("header.php");
?>
<!-- do not touch above -->
    <body>



        <div data-role="page" id="page1" data-theme="f">
            <div data-theme="f" data-role="header">
                <img src="css/logo.gif"width="100%" style="border-bottom :1px solid white" alt="" />
            </div>
         <div data-role="content">
         <a href="index.php"  data-role="button" data-transition="flip" data-icon="back" data-theme="b">Back</a>
                              <a data-role="button" data-transition="pop" href="page1" data-theme="b" data-icon="tel" data-iconpos="left">
                    Call Us
                </a>
         <!--   </div>-->


                          <div class="drawers-wrapper">
    <!--<div class="boxcap captop"></div>-->
    <ul class="drawers">

 <ul class="drawers">
        <li class="drawer">
            <h2 class="drawer-handle open">Starters</h2>
     <!-- removes under border-->
           <!-- <ul class="alldownloads">-->
            <!--removed above -->
            <ul>
                <li id="sn-downloadsmacosx">All Categories <div style="text-align:right;">£2.50</div></li>
                <li id="sn-aperture">Big dish<div style="text-align:right;">£2.50</div></li>
                <li id="sn-apple"><a href="/downloads/macosx/apple/">Apple</a></li>

                <li id="sn-video"><a href="/downloads/macosx/video/">Video</a></li>
                <li id="sn-dashboard"><a href="/downloads/dashboard/" class="bottom">Widgets</a></li>
            </ul>
        </li>
        <li class="drawer">
            <h2 class="drawer-handle">Tandoori</h2>
            <ul>
                <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>

                <li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
                <li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
            </ul>
        </li>
          <li class="drawer">
            <h2 class="drawer-handle">Traditional</h2>
            <ul>
                <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>

                <li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
                <li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
            </ul>
        </li>
          <li class="drawer">
            <h2 class="drawer-handle">Originals</h2>
            <ul>
                <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>

                <li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
                <li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
            </ul>
        </li>
          <li class="drawer">
            <h2 class="drawer-handle">Specials</h2>
            <ul>
                <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>

                <li><a title="iSquint" href="/downloads/macosx/ipod_itunes/isquint.html">13. iSquint</a></li>
                <li class="last"><a title="US Holiday Calendar" href="/downloads/macosx/calendars/usholidaycalendar.html">14. US Holiday Calendar</a></li>
            </ul>
        </li>
        <li class="drawer last">
            <h2 class="drawer-handle">Fish</h2>
            <ul>
                <li><a title="iTunes 7.5" href="http://www.apple.com/itunes/download/">1. iTunes 7.5</a></li>
                <li><a title="QuickTime 7.3.1" href="http://www.apple.com/quicktime/download/">2. QuickTime 7.3.1</a></li>

                <li><a title="Security Update 2007-009 1.1 (10.4.11 Universal)" href="/downloads/macosx/apple/security_updates/securityupdate20070091110411universal.html">13. Security Update 20</a></li>
                <li class="last"><a title="Security Update 2007-009 1.1 (10.5.1)" href="/downloads/macosx/apple/security_updates/securityupdate2007009111051.html">14. Security Update 20</a></li>
            </ul>
        </li>
    </ul>   
<!--<div class="boxcap"></div>-->
    </div>  



            </div>      



            <!-- do not touch below -->
            <div data-theme="b" data-role="footer">
                <h3>
                    &copy; Balti Tandoori
                </h3>
            </div>

    </body>
</html>

非常感谢你的帮助

为了清晰起见而添加了header.php

       <script type="text/javascript">

  $(document).bind('pageinit', function(){  //new bit added in script
$(function () {
  $('UL.drawers').accordion({
    // the drawer handle
    header: 'H2.drawer-handle',

    // our selected class
    selectedClass: 'open',

    // match the Apple slide out effect
    event: 'mouseover'
  });
});
});          //new bit added in script
</script>

Answer 1

哪些 JavaScript无效？我很难确切地知道你的意思，但我愿意采取预感，你的事件处理程序都没有受到约束。您没有显示所有这些外部脚本文件的内容，因此我不能肯定地说，但只是快速细分：

您的所有JavaScript代码都在文档的头部。这意味着它们会在处理body标签之前加载。此外，jQuery Mobile动态创建了大量DOM。我在任何地方都看不到对$(document).ready()的调用，这很好，因为这在jQuery Mobile中有点“逐步淘汰”，也我看到$(document).bind("pageinit", function())的调用，这是在jQuery Mobile中加载页面后将事件处理程序绑定到DOM元素的首选方法。

我看到你将一个回调绑定到文档的mobileinit事件，但per the jQuery Mobile文档，这是在构建DOM之前很久就调用的。

让我们说你的手风琴功能是不起作用的。你正在寻找的模式是：

$(document).bind('pageinit', function(){
    $('UL.drawers').accordion({
    // the drawer handle
    header: 'H2.drawer-handle',

    // our selected class
    selectedClass: 'open',

    // match the Apple slide out effect
    event: 'mouseover'
    });
});

在jquery ajax调用之后javascript无法正常工作

1 个答案: