首页
所有分类
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 Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
May 01 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery Layer弹出层传值到父页面的实现代码
Aug 17 jQuery
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 jQuery
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
JS实现选项卡插件的两种写法（jQuery和class）
Dec 30 jQuery
jquery实现广告上下滚动效果
Mar 04 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
appdata(1) Windows server 2003(1) 黑屏(2) Mysql8(2) celery(1) Outlook(1) sentinel(1) mysqldump(1) ACID(1) minio(1)
You might like
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
Symfony模板的快捷变量用法实例
2016/03/17 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
2016/01/23 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python进阶教程之循环对象
2014/08/30 Python
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
python变量不能以数字打头详解
2016/07/06 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python 硬币兑换问题
2019/07/29 Python
使用Pyinstaller转换.py文件为.exe可执行程序过程详解
2019/08/06 Python
python urllib爬虫模块使用解析
2019/09/05 Python
Python底层封装实现方法详解
2020/01/22 Python
python matplotlib工具栏源码探析三之添加、删除自定义工具项的案例详解
2021/02/25 Python
Wiggle中国：英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
世界上最好的儿童品牌：AlexandAlexa
2018/01/27 全球购物
海蓝之谜英国官网：La Mer英国
2020/01/15 全球购物
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
广告学专业毕业生自荐信
2013/09/24 职场文书
批评与自我批评范文
2014/10/15 职场文书
工作证明格式范文
2015/06/15 职场文书
小学语文教师研修日志
2015/11/13 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript