使用jQuery的AJAX封装函数load（）异步加载多个页面的相同页头/页尾（注意：js无法操作动态生成的网页元素）...

最新推荐文章于 2021-12-24 17:26:57 发布

weixin_34121304

最新推荐文章于 2021-12-24 17:26:57 发布

阅读量328

点赞数

文章标签： javascript php python ViewUI

原文链接：https://my.oschina.net/webcaorui/blog/1546631

版权

2019独角兽企业重金招聘Python工程师标准>>>

注意：js无法操作动态生成的网页元素；

解决方法 1.使用事件委托给他们的父元素

2.在load（）的回调函数中操作；如：

                     $('#header').load('5_header.php',function(){
                             //在回调函数中操作动态加载的头部中的html元素
                      });

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
    .nav {
      list-style:none;
      margin: 0;
      padding: 0;
    }
    .nav li {
      display: inline-block;
    }
    .copyright {
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div id="header">
      <img src="img/loading.gif">
    </div>
    <div id="main">
      <h3>这是首页</h3>
      <p>lorem*3</p>
    </div>
    <div id="footer">
      <img src="img/loading.gif">
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
    //待页面加载完后，异步请求页头和页尾
    //$(document).ready(fn);
    $(function(){   //页面加载完成要执行的函数
      $('#header').load('5_header.php',function(){
	     //在回调函数中操作动态加载的头部中的html元素
      });
      $('#footer').load('6_footer.php');
    });
    </script>

  </body>
</html>

header.php

<?php
header('Content-Type: text/html;charset=UTF-8');
?>
<ul class="nav">
	<li><a href="#">首页</a></li>
	<li><a href="#">新闻</a></li>
	<li><a href="#">产品</a></li>
</ul>

footer.php

<?php
header('Content-Type: text/html;charset=UTF-8');
?>

<hr>
<p class="copyright">版权所有® 2016 TARENA.COM</p>

转载于:https://my.oschina.net/webcaorui/blog/1546631

weixin_34121304

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery的AJAX封装函数load（）异步加载多个页面的相同页头/页尾（注意：js无法操作动态生成的网页元素）...

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫