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服务器中的路径访问，就没有问题啦！形如: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 = "https://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>