0

我有两个基于 jquery 移动 ui 的 html 文件，文件“1.html”和“2.html”

我正在做从 1.html 到 2.html 的简单幻灯片转换

我在 2.html 文件中发出一些 http post 请求，在转换之后，它没有在 2.html 中执行任何 js 代码。

1.html

<!DOCTYPE html>
<!--
Design by mRova Solutions
http://www.mrova.com
Released for free under a Creative Commons Attribution 2.5 License
-->
<html>
    <head>
        <title>O9 ShopAlot</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <link rel="stylesheet" href="css1/style.css" />
        <link rel="stylesheet" href="css1/photoswipe.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript" src="js1/klass.min.js"></script>
        <script type="text/javascript" src="js1/code.photoswipe.jquery-3.0.4.min.js"></script>
        <script type="text/javascript" src="js1/custom.js"></script>
        <script type="text/javascript">

        function openBrands(id)
        {
            //open next page by slide effect
            //window.open("brand.html");
            alert(id);

              $.ajax({
                    type:       "get",
                    url:        "InterestJ",
                    data:       "id=" + id,
                    success:    function(data) {
                        alert(id+" Data Session Attribute Set");

                        /*
                        data=JSON.parse(data);
                        //alert($("#listID").innerHTML);
                        //alert(document.getElementById("listID").innerHTML);
                        var setHTML = '';
                        for( i in data)
                        {
                            if(i>0&&i!=data.length-1)
                            {
                                //ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a
                                setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                       <a id="'+data[i].id+'"  href="brand.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)"; >'+data[i].interest+'</a>                  </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'
                            }
                            else if(i!=data.length-1){
                                setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                        <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a>                     </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'; 
                            }else                               
                            setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                         <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a>                     </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';

                            //alert(data[i].id);
                            //alert(data[i].interest);

                        }
                        document.getElementById("listID").innerHTML=setHTML;
                     */ 
                    }
                });
        }

        function loadInterest(){
                $.ajax({
                    type:       "post",
                    url:        "InterestJ",
                    //data:       "term=" + term,
                    success:    function(data) {
                        data=JSON.parse(data);
                        //alert($("#listID").innerHTML);
                        //alert(document.getElementById("listID").innerHTML);
                        var setHTML = '';
                        for( i in data)
                        {
                            if(i>0&&i!=data.length-1)
                            {
                                //ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a
                                setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                       <a id="'+data[i].id+'"  href="brandMobile.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)"; >'+data[i].interest+'</a>                    </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'
                            }
                            else if(i!=data.length-1){
                                setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                        <a id="'+data[i].id+'" href="brandMobile.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a>                   </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'; 
                            }
                            else                                
                            setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                         <a id="'+data[i].id+'" href="brandMobile.html" data-transition="slide" class="ui-link-inherit" onclick="openBrands(this.id)">'+data[i].interest+'</a>                   </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';

                            //alert(data[i].id);
                            //alert(data[i].interest);
                            }
                        document.getElementById("listID").innerHTML=setHTML;                        
                    }
                });
            }
        </script>
    </head>
    <body onload="loadInterest()">
        <div data-role="page" >
            <div data-role="header" id="header">
                <h1>Mobile Template</h1>
            </div><!-- /header -->
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="a" id="listID">

                </ul>
                <p class="copyright">Copyright &copy; mobi. Designed by <a href="http://mrova.com" class="ui-link">mRova</a></p>
            </div><!-- /content -->
              <div data-role="footer" data-theme="a">
            <div class="ui-bar">
             <a href="share-dialog.html"  data-role="button" data-icon="star" data-theme="a" data-rel="dialog">Share</a> 
             <a href="contact.html" data-role="button" data-icon="plus" data-theme="a">Contact</a>
             <a href="" data-role="button" data-icon="arrow-u" data-theme="a" style="float:right;" class="returnTopAction">Return top</a>    

           </div>
          </div>
       </div>
    </body>
</html>

2.html

<!DOCTYPE html>
<!--
Design by mRova Solutions
http://www.mrova.com
Released for free under a Creative Commons Attribution 2.5 License
-->
<html>
    <head>
        <title>O9 ShopAlot</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <link rel="stylesheet" href="css1/style.css" />
        <link rel="stylesheet" href="css1/photoswipe.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <script type="text/javascript" src="js1/klass.min.js"></script>
        <script type="text/javascript" src="js1/code.photoswipe.jquery-3.0.4.min.js"></script>
        <script type="text/javascript" src="js1/custom.js"></script>
        <script type="text/javascript"><!--


           function loadBrand(){
                $.ajax({
                    type:       "post",
                    url:        "BrandJ",
                    //data:       "term=" + term,
                    success:    function(data) {
                        //data=JSON.parse(data);
                        //alert($("#listID").innerHTML);
                        //alert(document.getElementById("listID").innerHTML);
                        alert(data+" session object get");
                        //var setHTML = '';
                    /*  for( i in data)
                        {
                            if(i>0&&i!=data.length-1)
                            {
                                //ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a
                                setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-btn-hover-a ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                       <a id="'+data[i].id+'"  href="brand.html" data-transition="slide" class="ui-link-inherit" >'+data[i].interest+'</a>                     </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'
                            }
                            else if(i!=data.length-1){
                                setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-top ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                        <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" >'+data[i].interest+'</a>                  </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>'; 
                            }else                               
                            setHTML+='<li data-theme="a" class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-corner-bottom ui-btn-up-a"><div class="ui-btn-inner ui-li ui-corner-top" aria-hidden="true"><div class="ui-btn-text">                         <a id="'+data[i].id+'" href="brand.html" data-transition="slide" class="ui-link-inherit" >'+data[i].interest+'</a>                  </div><span class="ui-icon ui-icon-arrow-r ui-icon-shadow"></span></div></li>';

                            //alert(data[i].id);
                            //alert(data[i].interest);




                        } */
                        //document.getElementById("listID").innerHTML=setHTML;

                    }
                });
            }
        --></script>
         <script>
         $('page').live('branMobile.html',function(event, ui){
              alert('This page was just shown: '+ ui.nextPage);
            });
          </script>
    </head>
    <body onload=loadBrand();>
        <div data-role="page" >
            <div data-role="header" id="header">
                <h1>Mobile Template</h1>
            </div><!-- /header -->
            <div data-role="content">
                <ul data-role="listview" data-inset="true" data-theme="a" id="listID">

                </ul>
                <p class="copyright">Copyright &copy; mobi. Designed by <a href="http://mrova.com" class="ui-link">mRova</a></p>
            </div><!-- /content -->
              <div data-role="footer" data-theme="a">
            <div class="ui-bar">
             <a href="share-dialog.html"  data-role="button" data-icon="star" data-theme="a" data-rel="dialog">Share</a> 
             <a href="contact.html" data-role="button" data-icon="plus" data-theme="a">Contact</a>
             <a href="" data-role="button" data-icon="arrow-u" data-theme="a" style="float:right;" class="returnTopAction">Return top</a>    

           </div>
          </div>
       </div>


    </body>
</html>

对不起，太长了

4

1 回答 1

0

当您导航到 JQM 中的新页面时，只会加载新页面的正文，而忽略标题。这意味着 2.html 标头中的任何 javascript 都将被忽略。为了实现您的目标，您需要 1）在 1.html 中插入所有 js 代码，包括 loadBrand 函数和 2）将您的调用绑定到 pageinit 事件而不是 onload（有关更多详细信息，请参阅JQuery 移动文档）

于 2012-10-29T13:17:39.733 回答