频道导航

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

2019-01-07 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了jQuery动态追加页面数据以及事件委托详解，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

首先效果图如下：

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

Photo Gallery

<div id = "gallery">
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye ....

<div class = "date">12/24/2000

<div class = "photographer"> Alasdair Dougall

<div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye....

<div class = "date">12/24/2000

<div class = "photographer"> Alasdair Dougall

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

//若干图片

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

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

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

<div class = "photo">
<img src = "./images/2.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye

<div class = "date">12/24/2000
<div class = "photographer"> Alasdair Dougall

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

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

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

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

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

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

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

//给<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a><a href="https://www.jb51.cc/tag/tianjia/" target="_blank" class="keywords">添加</a>点击事件
$("#more-photos").click(function(event){
  event.preventDefault();
  var $link = $(this);

  //获得当前所点<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>的url
  var url = $link.attr('href');

  //如果该<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>的url存在，进行<a href="https://www.jb51.cc/tag/yemian/" target="_blank" class="keywords">页面</a>追加
  if(url){
    $.get(url,function(data){
      $("#gallery").append(data);
    });

pageNum ++;

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

//当将所有片段追加完成后，移除<a href="https://www.jb51.cc/tag/lianjie/" target="_blank" class="keywords">链接</a>。
  else{
    $link.remove();
  }
  }
})

});

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

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

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

解决办法

就是装一个web服务器，然后将文件拷到项目中，以web服务器中的路径访问，就没有问题啦！形如

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

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

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

所以有两种解决方案：

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

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

  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构建结束。如上面的代码可以写为：‘

因为没有等到整个文档就绪，所以可以确保所有

元素只要呈现在页面上，就可以应用mouseenter 和mouseleave行为。

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

动态加载

Photo Gallery

<div id = "gallery">
<div class = "photo">
<img src = "./images/1.jpg">
<div class = "details">
<div class = "description">The Cullin Mountains,Isle of skye....

<div class = "date">12/24/2000

<div class = "photographer"> Alasdair Dougall

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

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

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

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

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

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

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

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/jquery/39473.html

jQuery事件委托 jQuery动态追加页面数据 jQuery追加页面数据