jquery动态加载并解决被加载页面js失效问题

代码布局结构分为 header  left  content

html代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>popomeet</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="bootstrap/css/login.css" rel="stylesheet">
    <link href="lunbotu/style.css" rel="stylesheet">
    <link href="bootstrap/css/index.css" rel="stylesheet">
    <link href="bootstrap/css/czsj.css" rel="stylesheet">
    <link href="img/link.ico" rel="shortcut icon" />
    <style type="text/css">

    </style>
</head>
<body style="background:#F2F2F2; ">
  <div id="header"></div>
    <!-- content-->
       <div class="middleContent" >
           <!-- 左侧-->
           <div class="left-first">
                <!-- 左侧导航部分-->
                  <div id="leftpol">
                  </div>
               <!-- 宣传图-->
               <div class="xcimg">
                   <img src="img/gg.png" class="iopa" alt="">
               </div>
           </div>
           <!-- 右侧 展示内容部分-->
           <div id="content">
           </div>
       </div>
    <!-- 版权位置-->
       <div class="copyright" >
         <p class="copyrightContent" >©popomeet保留所有权利</p>
       </div>

</body>
<script src="bootstrap/js/jquery-3.1.0.min.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="http://www.jq22.com/demo/pagination20160204/jquery.pagination.js"></script>

<!--<script src="bootstrap/js/indexsy.js"></script>-->
 
</html>

将三面的三个部分(header left footer)代码加载过来   被加载的页面 要放到id="content"下面 

  

/*
 *加载变换内容,主要url参数为dom对象,并且该dom中的url放在href中,
 *调用方式如:<span οnclick="javascript:load(this);" href="/backstage/website/test.html">测试</span>
 *注意:1.该dom对象最好不要用a标签,因为点击a标签会进入href指定的页面
 *      2.要加载的内容要用 id="content" 标注,因为load中指明了加载页面中指定的id为content下的内容
 *      3.对应页面的JavaScript写在content下
 */
<script>
    $("#header").load("header.html");
    $("#leftpol").load("left.html");
    $("#content").load("sidebar.html");
    function load(url, data){
        alert($(url).attr("href"));
        $.ajaxSetup({cache: false });
        $("#content").load($(url).attr("href")+ " #content ", data, function(result){
            alert(result);
            //将被加载页的JavaScript加载到本页执行
            $result = $(result);
            $result.find("script").appendTo('#content');
        });

    }
</script>
<!-- 被加载页面的代码-->
<div id="content" style="width:76%;height:1000px;float:left;margin-left:2%;background-color:#FFFFFF;border-radius:3px;">
     <link href=" http://yanshi.sucaihuo.com/jquery/29/2986/demo/css/style.css" rel="stylesheet">
     <div style="width:100%;height:1000px;">
          <img src="img/game-1.png" style="width:36%;height:270px;margin-left:30%;margin-top:100px;" alt="">
          <div class="loader loader-10" style="position: absolute;margin-top:410px;margin-left:-9%"></div>
     </div>
</div>
 
  

 

 

转载于:https://www.cnblogs.com/yuancr/p/8808370.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值