在JQuery Mobile UI中进行幻灯片过渡时无法执行Java脚本

我有两个基于jQuery Mobile UI的HTML文件，文件" 1.html"one_answers" 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>

对不起，太长

当您导航到JQM中的新页面时，仅加载了新页面的主体，将忽略标头。这意味着2.html标题中的任何JavaScript都将被忽略。要达到目标，您需要1）将所有JS代码插入1.html，包括LoadBrand功能和2）将您的呼叫绑定到PageInit事件而不是onload（请参阅JQuery Mobile Doc，有关更多详细信息）

）

相关内容

最新更新

热门标签：