首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript jQuery

jQuery动态追加页面数据以及事件委托详解

Posted in jQuery onMay 06, 2017

我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。

首先效果图如下：

jQuery动态追加页面数据以及事件委托详解

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时，再加载一部分数据，然后再点击在加载一部分数据，直到数据加载完。
首先body中代码如下：

<div id = "container">
<h1> Photo Gallery</h1>

<div id = "gallery">
  <div class = "photo">
    <img src = "./images/1.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

  <div class = "photo">
    <img src = "./images/2.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/3.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>
//若干图片

</div>

 <div class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></div> 
</div>

然后在同一根目录下写几个HTML代码片段，用于加载。

如，我这有一个1.html代码如下

<div class = "photo">
    <img src = "./images/1.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

  <div class = "photo">
    <img src = "./images/2.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/3.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/4.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/5.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/6.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

在这个HTML片段中我引入了6个图片。其他的片段如2.html等等都可以仿照上面的这个来写。在定义好了许多个HTML片段后，利用jQuery进行动态追加数据。

首先引入一个jquery库 http://libs.baidu.com/jquery/1.9.0/jquery.js

<script>
  $(document).ready(function(){
  //首先定义一个变量来记录当前是多少页
    var pageNum = 1;

    //给链接添加点击事件
    $("#more-photos").click(function(event){
      event.preventDefault();
      var $link = $(this);

      //获得当前所点链接的url
      var url = $link.attr('href');

      //如果该链接的url存在，进行页面追加
      if(url){
        $.get(url, function(data){
          $("#gallery").append(data);
        });

    pageNum ++;
  //总共有十个片段要追加，名称分别为1.html,2.html ...10.html
    当当前页面的总数小于总数时，进行链接更新。
    if(pageNum < 10){
      $link.attr('href', './'+pageNum+'.html');
        }

    //当将所有片段追加完成后，移除链接。
      else{
        $link.remove();
      }
      }
    })
  });

以上的代码就可以进行动态的向页面追加数据了。

但是在谷歌的浏览器中会出现以下的错误：

jquery.js:8475 XMLHttpRequest cannot load file:///C:/Users/%E9%95%BF%E5%AD%99%E4%B8%B9%E5%87%A4/Desktop/webtest/1.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

在IE10的环境下进行测试的，没问题。

解决办法就是装一个web服务器，然后将文件拷到项目中，以web服务器中的路径访问，就没有问题啦！形如http://localhost:8080/ajax/ajaxLoad.html

由于还有鼠标悬浮事件，当我们将鼠标悬浮在某个图片上时，就会出现文字，移出时，图片上的文字消失。

$(document).ready(function(){
    $('div .photo').hover(function(){
      $(this).find('.details').fadeTo('slow', 0.7);
    },function(){
        $(this).find('.details').fadeOut('slow');
    })
  });

或者可以将上面的代码组合起来减少冗余代码：

$(document).ready(function(){
  $('div.photo').on('mouseenter mouseleave', 
      function(event){
      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
        //0.7代表的是透明度
      }
      else{
        $details.fadeOut('slow');
      }
    })
});

当我们使用上面的两种代码为每个图片添加鼠标悬浮事件时，只有最初页面上的那些图片才会被绑定事件，而经过动态加载的图片上却没能绑定上事件。因为事件处理程序只会添加到调用方法时已经存在的元素上，像通过这种动态追加的元素，不会绑定那些事件。

所以有两种解决方案：

1. 在动态加载后重新绑定事件处理程序
2. 一开始就把事件绑定在存在的元素上，依赖于事件冒泡。

接下来就是使用jquery的委托方法;

$(document).ready(function(){
    $('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){

      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
      }
      else{
        $details.fadeOut('slow');
      }
    })
  })

$(‘#gallery').on(‘mouseenter mouseleave', ‘div.photo', function(event)中，在将'div.photo'作为第二个参数的情况下，.on()方法会把 this映射到 gallery中与该选择符匹配的元素。换句话说，就是this指向gallery中的 div class= ‘photo'的元素。

所以在最后追加的页面中，由于都属于gallery 下的元素，所以每一个图片都会加上相应的事件。

或许在你不知道要添加的页面属于哪个父级元素的话，可以将$(‘#gallery').on( )中的'#gallery'替换成document。这样就不必担心选错容器。因为document是页面中所有元素的祖先。

但使用document有弊端：

当DOM嵌套结构很深，事件冒泡通过大量的祖先元素会有较大的性能损失。
但是还会有其他的原因让我们选择document作为委托作用域。
一般来说，只有当相应的DOM元素加载完毕，才会给它绑定事件处理程序。这就是为什么我们要把代码放到$(document).ready(function(){}内部的原因。可是document元素是随着页面加载几乎就立即可以调用的。把处理程序绑定到document不用等到完整的DOM构建结束。如上面的代码可以写为：‘

(function($){
    $(document).on('mouseenter mouseleave', 'div.photo', function(event){

      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
      }
      else{
        $details.fadeOut('slow');
      }
    })
  })(jQuery);

因为没有等到整个文档就绪，所以可以确保所有<div class= 'photo'>元素只要呈现在页面上，就可以应用mouseenter 和mouseleave行为。

上面就是关于利用jQuery动态追加页面数据以及事件委托的全部知识。下面附上源代码；

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
  <title>动态加载</title>
  <script type="text/javascript" src = "http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
  <style type="text/css">
  *{
    margin: 0px;
    padding: 0px;
  }


  #container{
    position: relative;
    width: 1300px;
    margin: 0 auto;
    /*background-color: #ccc;
    height: auto;*/
  }
  #gallery{
    position: relative;
    width: 1300px;
    margin: 0 auto;

  }
  .details{
    display: none;
  }

  .photo{
    padding: 20px;
    border-radius: 5px;
    border:1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    float: left;
    margin: 8px;
  }

  .photo img{

    /*z-index: 1;*/
    width: 200px;
    height: 300px;
    clear: both;
  }

  .photo .details{
    position: absolute;
    z-index: 2;
    padding-left: 20px;
    margin-top:-200px;
    /*clear: both;*/
    overflow: hidden;
  }
  .description{
    overflow: hidden;
    width: 200px;
    color: lightgreen;
    font-size: 18px;
    font-weight: bold;
  }

  .date{
    font-size:16px;
    margin: 20px 0px;
    color: red; 
  }
  .photographer{
    font-size:14px;
    font-family: "Arial" ;
  }
  .link a{

    clear: both;
    text-decoration: none;
    padding-left: 90%;


  }
  h1{
    text-align: center; 
  }
  </style>

  <script>
  $(document).ready(function(){

    var pageNum = 1;
    $("#more-photos").click(function(event){
      event.preventDefault();
      var $link = $(this);
      var url = $link.attr('href');
      console.log(url);
      if(url){
        $.get(url, function(data){
          $("#gallery").append(data);
        });

        pageNum ++;
        if(pageNum < 4){
          $link.attr('href', './'+pageNum+'.html');
        }


      else{
        $link.remove();
      }
      }
    })
  })

  // $(document).ready(function(){
  // $('div .photo').hover(function(){
  //   $(this).find('.details').fadeTo('slow', 0.7);
  // },function(){
  //     $(this).find('.details').fadeOut('slow');
  // })
  // })

  $(document).ready(function(){
    $('#gallery').on('mouseenter mouseleave', 'div.photo', function(event){

      var $details = $(this).find('.details');
      if(event.type == 'mouseenter'){
        $details.fadeTo('slow', 0.7);
      }
      else{
        $details.fadeOut('slow');
      }
    })
  })

  </script>
</head>
<body>
<div id = "container">
<h1> Photo Gallery</h1>

<div id = "gallery">
  <div class = "photo">
    <img src = "./images/1.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

  <div class = "photo">
    <img src = "./images/2.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/3.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/4.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye .....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/5.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ....</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/6.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ...</div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/7.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye.... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/8.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye..... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/9.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye ...... </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/10.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/11.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/12.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>


    <div class = "photo">
    <img src = "./images/13.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/14.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

    <div class = "photo">
    <img src = "./images/15.jpg">
    <div class = "details">
      <div class = "description">The Cullin Mountains, Isle of skye </div>
      <div class = "date">12/24/2000</div>
      <div class = "photographer"> Alasdair Dougall</div>
    </div>
  </div>

</div>

 <div class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></div> 
</div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery动态追加页面数据以及事件委托详解

- Author -

画一生情入颜容

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

jQuery 相关文章推荐
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现frame之间互通的方法
Jun 26 jQuery
jQuery实现一个简单的验证码功能
Jun 26 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
基于JQuery实现页面定时弹出广告
May 08 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 #jQuery
jQuery extend()详解及简单实例
May 06 #jQuery
jquery仿微信聊天界面
May 06 #jQuery
简单实现jQuery弹幕效果
May 06 #jQuery
jquery实现提示语淡入效果
May 05 #jQuery
Jquery获取radio选中的值
May 05 #jQuery
jQuery实现简单的抽奖游戏
May 05 #jQuery
Switch(1) Spring JPA(1) openEuler(1) Django(9) 远程桌面(2) TextInputLayout(1) Tsmoothie(1) EditText(1) Spring Bean(1) Selenium(1)
You might like
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP+redis实现的购物车单例类示例
2019/02/02 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue父子组件的嵌套的示例代码
2017/09/08 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
js中getBoundingClientRect的作用及兼容方案详解
2018/02/01 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中global用法实例分析
2015/04/30 Python
Python中实现变量赋值传递时的引用和拷贝方法
2018/04/29 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
使用tensorflow实现线性回归
2018/09/08 Python
使用Scrapy爬取动态数据
2018/10/21 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
Notino意大利：购买香水和化妆品
2018/11/14 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
法务专员岗位职责
2014/01/02 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
天坛导游词
2015/02/02 职场文书
个人年终总结怎么写
2015/03/09 职场文书
呐喊读书笔记
2015/06/30 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle
MySQL完整性约束的定义与实例教程
2021/05/30 MySQL