首页
所有分类
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自定义多选下拉框效果
Jun 19 jQuery
jquery tmpl模板(实例讲解)
Sep 02 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
简单实现jQuery弹窗效果
Oct 30 jQuery
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jquery实现手风琴案例
May 04 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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
哈萨克斯坦购物网站(2) 白俄罗斯购物网站(3) 摩纳哥购物网站(1) 保加利亚购物网站(3) 亚洲购物网站(6) 罗马尼亚购物网站(10) 约旦购物网站(1) 马耳他购物网站(1) 希腊购物网站(6) 乌克兰购物网站(27)
You might like
基于mysql的bbs设计（二）
2006/10/09 PHP
php发送与接收流文件的方法
2015/02/11 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
jQuery 性能优化指南（3）
2009/05/21 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
JS实现评价的星星功能
2017/08/20 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
node使用request请求的方法
2019/12/20 Javascript
JS如何生成动态列表
2020/09/22 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
python实现猜单词小游戏
2020/05/22 Python
对python模块中多个类的用法详解
2019/01/10 Python
Python后台开发Django的教程详解（启动）
2019/04/08 Python
Python 实现微信防撤回功能
2019/04/29 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
根据tensor的名字获取变量的值方式
2020/01/04 Python
俄罗斯品牌服装和鞋子的在线商店：KUPIVIP
2019/10/27 全球购物
区域销售经理岗位职责
2013/12/10 职场文书
个人公开承诺书
2014/03/28 职场文书
委托协议书范本
2014/04/22 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
2014年保密工作总结
2014/11/22 职场文书
发票退票证明
2015/06/24 职场文书
高中团支书竞选稿
2015/11/21 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js