在jquery mobile UI中执行幻灯片转换时无法执行java脚本_Jquery_Jquery Mobile

在jquery mobile UI中执行幻灯片转换时无法执行java脚本

jquery jquery-mobile

在jquery mobile UI中执行幻灯片转换时无法执行java脚本,jquery,jquery-mobile,Jquery,Jquery Mobile,我有两个基于jquery mobile 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

我有两个基于jquery mobile 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>


O9 ShopAlot
功能openBrands（id）
{
//按幻灯片效果打开下一页
//window.open（“brand.html”）；
警报（id）；
$.ajax({
键入：“获取”，
网址：“InterestJ”，
数据：“id=”+id，
成功：功能（数据）{
警报（id+“数据会话属性集”）；
/*
data=JSON.parse（数据）；
//警报（$（“#listID”）.innerHTML）；
//警报（document.getElementById（“listID”）.innerHTML）；
var setHTML=''；
对于（数据中的i）
{
如果（i>0&&i！=data.length-1）
{
//ui btn ui btn图标右侧ui li有箭头ui li ui-btn-hover-a ui-btn-up-a
setHTML+=''
}
else如果（i！=数据长度-1）{
setHTML+='；
}否则
setHTML+='；
//警报（数据[i].id）；
//警报（数据[i]。兴趣）；
}
document.getElementById（“listID”）.innerHTML=setHTML；
*/ 
}
});
}
函数loadInterest（）{
$.ajax({
类型：“post”，
网址：“InterestJ”，
//数据：“术语=”+术语，
成功：功能（数据）{
data=JSON.parse（数据）；
//警报（$（“#listID”）.innerHTML）；
//警报（document.getElementById（“listID”）.innerHTML）；
var setHTML=''；
对于（数据中的i）
{
如果（i>0&&i！=data.length-1）
{
//ui btn ui btn图标右侧ui li有箭头ui li ui-btn-hover-a ui-btn-up-a
setHTML+=''
}
else如果（i！=数据长度-1）{
setHTML+='；
}
其他的
setHTML+='；
//警报（数据[i].id）；
//警报（数据[i]。兴趣）；
}
document.getElementById（“listID”）.innerHTML=setHTML；
}
});
}
移动模板


版权与复制；莫比。设计人

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>


O9 ShopAlot
$（'page'）.live（'branMobile.html'，函数（事件，用户界面）{
警报（'此页面刚刚显示：'+ui.nextPage）；
});
移动模板


版权与复制；莫比。设计人

抱歉，当您在JQM中导航到新页面时，页面太长了，只加载了新页面的主体，而忽略了标题。这意味着2.html标题中的任何javascript都将被忽略。

为了实现您的目标，您需要1）在1.html中插入所有js代码，包括loadBrand函数；2）将调用绑定到pageinit事件，而不是onload（更多详细信息，请参见）

您可以发布代码片段plz吗？是的，我需要将所有js放在1.html中，谢谢，而不是重定向到2.html，我可以把它的内容放在另一个分区