代码布局结构分为 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 onclick="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>


 


												


											
jquery动态加载并解决被加载页面js失效问题的更多相关文章
	

    
								
  1. Android使用Glide加载Gif.解决Glide加载Gif非常慢问题
		
    在Glide文档中找了半天没发现加载Gif的方式.然后通过基本的用法去加载: Glide.with(MainActivity.this).load(url).asGif().into(imageVie ...
    
		
    2. 
						
  2. 关于在jquery动态修改css,html中,mouseenter,mouseleave,click等方法失效的处理
		
    
		
    3. 
						
  3. 使用jquery的load方法设计动态加载，并解决被加载页面JavaScript失效问题
		
    一.问题分析 对于后台系统,相比大家都有所印象,知道其中的布局结构,如图: 在这种布局中我们需要将header,sidebar,footer分开,而且对于中间部分的content内容需要动态变化,即根 ...
    
		
    4. 
						
  4. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
		
    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
    
		
    5. 
						
  5. jquery动态加载问题
		
    对于append的元素,原有的方法不生效 解决:用on方法 找到的:http://www.zhidao91.com/jquery-html-live-on/ 解决使用jQuery采用append添加的 ...
    
		
    6. 
						
  6. 使用jQuery动态加载js脚本
		
    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在本站已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js.它们很强大,但有时候也会得不偿失.如果你使 ...
    
		
    7. 
						
  7. 使用jQuery动态加载js脚本文件的方法
		
    动态加载Javascript是一项非常强大且有用的技术.这方面的主题在网上已经讨论了不少,我也经常会在一些个人项目上使用RequireJS和Dojo加载js 它们很强大,但有时候也会得不偿失.如果你使 ...
    
		
    8. 
						
  8. jquery动态加载 去除js
		
    !-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
    
		
    9. 
						
  9. JQuery 动态加载iframe.
		
    html: <iframe id="ifm" style="width:inherit;height:inherit" runat="serve ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Halcon 学习2 金属雕刻字识别
			
    *HALCON 里面的例程名称:engraved_cnn.hdevread_image (Image, 'engraved')get_image_size (Image, Width, Height) ...
    
			
    2. 
						
  2. 【C/C++开发】C++队列缓存的实现
			
    C++队列缓存的实现 为什么使用队列缓存 c++的队列缓存主要用于解决大数据量并发时的数据存储问题,可以将并发时的数据缓存到队列中,当数据量变小时再匀速写入硬盘中. 引用queue队列 在头文件中引用 ...
    
			
    3. 
						
  3. win7/Ubuntu双系统给Ubuntu扩大硬盘
			
    问题 电脑上装了windows 7和ubuntu双系统,起初分配硬盘的时候,给ubuntu划分的量较少,如今硬盘空间已不够用,另外挂载分区也不够方便.希望能在不重装系统的情况下,从win7的硬盘中分一 ...
    
			
    4. 
						
  4. 最新  中钢网java校招面经 （含整理过的面试题大全）
			
    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.中钢网等10家互联网公司的校招Offer,因为某些自身原因最终选择了中钢网.6.7月主要是做系统复习.项目复盘.LeetCo ...
    
			
    5. 
						
  5. 说一说Unsafe魔法类
			
    这篇算是对 Unsafe 的一个总体概况,由于内容实在太多,后续会分开几篇文章对里面内容展开细讲 前言 Unsafe可以说是java的后门,类似西游记中的如来佛祖法力无边,Unsafe主要提供一些用于 ...
    
			
    6. 
						
  6. SAS学习笔记25 t检验（单个样本t检验、配对样本t检验、两个独立样本t检验及方差不齐时的t'检验）
			
    根据研究设计和资料的性质有单个样本t检验.配对样本t检验.两个独立样本t检验以及在方差不齐时的t'检验 单样本t检验 单样本t检验(one-sample t-test)又称单样本均数t检验,适用于样本 ...
    
			
    7. 
						
  7. Java坑人面试题之自动装箱和拆箱后的引用数据类型和基本数据类型的计算
			
    在Java1.5以后的版本中,引用类型Integer和基本数据类型int之间是可以通过自动装箱和拆箱进行计算的 例如: Integer in = 1; //it means  Integer in = ...
    
			
    8. 
						
  8. Luogu4770 NOI2018你的名字（后缀自动机+线段树合并）
			
    先考虑l=1,r=n,并且不要求本质不同的情况.对原串建SAM,将询问串在上面跑,得到每个前缀的最长匹配后缀即可得到答案. 然后考虑本质不同.对询问串也建SAM,统计每个节点的贡献,得到该点right ...
    
			
    9. 
						
  9. C# LoadXml System.Xml.XmlException: Data at the root level is invalid. Line 1, position 1.
			
    去掉BOM头 writer = new XmlTextWriter(stream, new UnicodeEncoding(false,false)); 如果是UTF8 writer = new Xm ...
    
			
    10. 
						
  10. C#记录日志到本地文件工具类
			
    using System; using System.Diagnostics; using System.IO; using System.Threading; using System.Web; n ...
    
			
    11.