jQuery动态追加页面数据以及事件委托详解
我们要执行的任务是页面起初有一部分图片，我们在底下有一个More Photos的链接，点击后，向当前页面后加载一部分图片，再点击该链接，继续加载，直到将我们列出的页面加载完成，此时该链接也消失了。
首先效果图如下：
这个只截取了最底下的一部分页面。在鼠标悬停在图片上时，还会有文字出现，鼠标移出时文字消失。
我们现在要做的就是点击底下的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自定义元素右键点击事件(实现案例)
大多数情况下我们使用左键来进行页面交互,而右键大部分对于开发者来说是审查元素的,有的时候我们也要自定义鼠标右键点击行为来达到更好的交互性,常见的有漫画左键前进.右键后退. 第一步我们要屏蔽浏览器默认的右键点击行为,即阻止弹出框. 首先要将阻止弹出函数绑定到目标元素上: //阻止浏览器默认右键点击事件 $("div").bind("contextmenu", function(){ return false; }) 如此一来,div元素的右击事件就被屏蔽了,而浏览器其
-
解决jQuery ajax动态新增节点无法触发点击事件的问题
在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: <ul id="demo"> <li class
-
jquery中绑定事件的异同
谈论jquery中bind(),live(),delegate(),on()绑定事件方式 1． Bind() $(selector).bind(event,data,function) Event:必须项;添加到元素的一个或多个事件. Data:可选;需要传递的参数 Function:必需;当绑定事件发生时,需要执行的函数; 定义事件: $(selector).bind({event1:function, event2:function, ...}): 2.live() $(selector).
-
jQuery中绑定事件bind() on() live() one()的异同
jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------
-
jQuery 复合选择器应用的几个例子
<!-- 本文例子所引用的jQuery版本为 jQuery-1.8.3.min.js --> 一. 复合选择器对checkbox的相关操作 <input type="checkbox" id="ckb_1" /> <input type="checkbox" id="ckb_2" disabled="true" /> <input type="checkb
-
JQuery触发radio或checkbox的change事件
早上要做一功能,checkbox被选中时,显示隐藏的层,取消选中时,再隐藏选中的层. 初始代码如下: 复制代码 代码如下: $(function(){ $("#ischange").change(function() { alert("checked"); }); }); 捣腾了半天,竟然一点反应都没有.百度了下,有高人指出上面几行代码在Firefox等浏览器中可以正常运行,即你选中复选框或取消复选框都会弹出一个对话框,但是在IE中却不会正常执行,即选中或取消复选框
-
jQuery中复合属性选择器用法实例
本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g
-
jquery移除、绑定、触发元素事件使用示例详解
复制代码 代码如下: unbind(type [,data]) //data是要移除的函数$('#btn').unbind("click"); //移除click$('#btn').unbind(); //移除所有 对于只需要触发一次的,随后就要立即解除绑定的情况,用one() 复制代码 代码如下: $('#btn').one("click",function(){.......}); 触发操作trigger() 方法触发被选元素的指定事件类型. 复制代码
-
jquery事件与绑定事件
1.首先,我们来看一下经常使用的添加事件的方式: <input type="button" id="btn" value="click me!" onclick="shao();" /> <script type="text/javascript"> function shao() { alert("msg is showing!"); } </script
-
JQuery 绑定select标签的onchange事件，弹出选择的值，并实现跳转、传参
复制代码 代码如下: <script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $('#mySelect').change(function(){ alert($
-
jQuery简单绑定单个事件的方法示例
本文实例讲述了jQuery简单绑定单个事件的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>绑定单个事件</title> <script type="text/javascript" src="jquery-1.7.2.min.j
-
jQuery复合事件用法示例
本文实例讲述了jQuery复合事件用法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>复合事件</title> <style type="text/css" > a{ color:#000; text-decoration:none; }