本文主要為大家詳細介紹了jQuery動態追加頁面資料以及事件委託的相關資料，具有一定的參考價值，有興趣的小夥伴們可以參考一下，希望能幫助到大家。
我們要執行的任務是頁面起初有一部分圖片，我們在底下有一個More Photos的鏈接，點擊後，向當前頁面後加載一部分圖片，再點擊該鏈接，繼續加載，直到將我們列出的頁面載入完成，此時該連結也消失了。
首先效果圖如下：
這個只截取了最底下的一部分頁面。在滑鼠懸停在圖片上時，還會有文字出現，滑鼠移出時文字消失。
我們現在要做的就是點擊底下的MorePhotos連結時，再載入一部分數據，然後再點擊在載入一部分數據，直到數據載入完畢。
首先body中程式碼如下：
<p id = "container">
<h1> Photo Gallery</h1>
<p id = "gallery">
<p class = "photo">
<img src = "./images/1.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye ....</p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/2.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye.... </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/3.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye.... </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
//若干图片
</p>
<p class = "link"><a id = "more-photos" href = "1.html"> More Photos >></a></p>
</p>然後在同一根目錄下寫幾個HTML程式碼片段，用於載入。
如，我這有一個1.html程式碼如下
<p class = "photo">
<img src = "./images/1.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/2.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/3.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/4.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/5.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>
<p class = "photo">
<img src = "./images/6.jpg">
<p class = "details">
<p class = "description">The Cullin Mountains, Isle of skye </p>
<p class = "date">12/24/2000</p>
<p class = "photographer"> Alasdair Dougall</p>
</p>
</p>在這個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, httpsported for protocol schemes: http, data, chrome, chrome-extension, https .
在IE10的環境下進行測試的，沒問題。解決方案就是裝一個web伺服器，然後將檔案拷到專案中，以web伺服器中的路徑訪問，就沒有問題啦！形如http://localhost:8080/ajax/ajaxLoad.html
#由於還有滑鼠懸浮事件，當我們將滑鼠懸浮在某個圖片上時，就會出現文字，移出時，圖片上的文字消失。$(document).ready(function(){
$('p .photo').hover(function(){
$(this).find('.details').fadeTo('slow', 0.7);
},function(){
$(this).find('.details').fadeOut('slow');
})
});$(document).ready(function(){
$('p.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');
}
})
});2. 一開始就把事件綁定在存在的元素上，依賴事件冒泡。
$(document).ready(function(){
$('#gallery').on('mouseenter mouseleave', 'p.photo', function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
}
else{
$details.fadeOut('slow');
}
})
})##或許在你不知道要新增的頁面屬於哪個父級元素的話，可以將$('#gallery').on( )中的'#gallery'替換成document。容器。祖先元素會有較大的效能損失。定事件處理程序。到document不用等到完整的DOM建置結束。 = 'photo'>元素只要呈現在頁面上，就可以應用mouseenter 和mouseleave行為。
##
(function($){
$(document).on('mouseenter mouseleave', 'p.photo', function(event){
var $details = $(this).find('.details');
if(event.type == 'mouseenter'){
$details.fadeTo('slow', 0.7);
}
else{
$details.fadeOut('slow');
}
})
})(jQuery);#詳解PHP設計模式之委託模式
JavaScript中關於事件委託的原生JS以及jQuery實例程式碼分享
#以上是jQuery動態追加頁面資料以及事件委託的詳細內容。更多資訊請關注PHP中文網其他相關文章！
