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>popomeettitle>
<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>
<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>
html>
将三面的三个部分(header left footer)代码加载过来 被加载的页面 要放到id="content"下面
/*
*加载变换内容，主要url参数为dom对象，并且该dom中的url放在href中，
*调用方式如：测试
*注意：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>