zoukankan      html  css  js  c++  java
  • Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

    没看懂,稍后再看

    Ajax中主页加载分页面后,分页面js脚本不执行的解决办法

    最近捣鼓JQuery,其中强大的Ajax系列函数令人印象深刻,所以做项目时毫不犹豫地采用了一下该技术,在主页中动态加载分页面进来,咋看效果 不错,都能实现了第一层次的加载,但深入下去问题就出来了:动态加载进来的页面中外联了js文件,其中的脚本却没有在加载后运行! (脚本在单独浏览该分页面时运行是正常的)

    我郁闷了,打开Firefox中的Firebug查看了加载后的主页面中的DOM,所有元素的加载都是正常的啊~

    自己改来改去一个个参数试都过了,在网上也找了半天,都没能解决问题。后来一想,咱把外联的js文件的脚本改成内联试试,一试,Ok了!加载进来的分页面终于能正常执行JQuery的函数!

    还有,主页面加载了JQuery库就可以了,分页面是不需要加载库的,因为分页面是集成到主页面的DOM中的,将和主页面共享同一个库脚本。

    贴一贴代码,让大家看得明白点:

    问题解决前:

    (分页面)

    <html>
    <head>
        <title>AccountPage</title>
        <link href="../Global.css" rel="stylesheet" type="text/css" />
           <script type="text/javascript" src="../js/jquery.min.js"></script>    <!--JQuery库,你懂的-->
           <script type="text/javascript" src="../js/Global.js"></script>  <!--外联的js文件-->
    </head>
    <body>   
     <div id="accountPage">
        <a id="modify">修改</a>
     </div>
    </body>
    </html>

    (分页面外联的js脚本)

    $(document).ready(function () {

                                            $("#modify").click(function(){

                                                  alert("This is alerted from AccountPage !");                             //分页面加载进主页后,这段代码并

                                                  $("#accountPage").append("<a href='#' >GooodWork</a>"); // 没有按期望运行

      });     

                                           

    });

    (主页的Ajax加载脚本)

    $(document).ready(function () {

                               $("#account").click(function () {                                                                       
                                                         $("#detail").load('component/accountPage.html');    })

    });

    解决后(只改了分页面):

    (分页面)

    <html>
    <head>
        <title>AccountPage</title>
        <link href="../Global.css" rel="stylesheet" type="text/css" />

             <script type="text/javascript">
              {
                 $("#modify").click(function(){

                               alert("This is alerted from AccountPage !");  

                               $("#accountPage").append("<a href='#' >GooodWork</a>"); 

                 });     
               }
             </script>

    </head>
    <body>   
     <div id="accountPage">
        <a id="modify">修改</a>
     </div>
    </body>
    </html>

    其实有点啰嗦了,一句话:要在Ajax加载进来的分页面运行的脚本,不能外联,必须内联!

    Only  you~can take me 取西经~~~

  • 相关阅读:
    L1-046. 整除光棍
    L2-014. 列车调度
    L2-009. 抢红包
    L2-005. 集合相似度
    L2-021. 点赞狂魔
    L1-033. 出生年
    设计模式之生成器模式
    设计模式之抽象工厂模式
    设计模式之工厂方法模式
    设计模式之简单工厂模式
  • 原文地址:https://www.cnblogs.com/shsgl/p/3923989.html
Copyright © 2011-2022 走看看