jQuery動態追加頁面資料以及事件委託

本文主要為大家詳細介紹了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(&#39;href&#39;);

      //如果该链接的url存在，进行页面追加
      if(url){
        $.get(url, function(data){
          $("#gallery").append(data);
        });

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

    //当将所有片段追加完成后，移除链接。
      else{
        $link.remove();
      }
      }
    })
  });

以上的程式碼就可以進行動態的向頁面追加資料了。

但在Google的瀏覽器中會出現以下的錯誤：

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');
      }
    })
});

當我們使用上面的當兩種程式碼為每個圖片添加滑鼠懸浮事件時，只有最初頁面上的那些圖片才會被綁定事件，而經過動態載入的圖片上卻沒能綁定上事件。因為事件處理程序只會加入到呼叫方法時已經存在的元素上，像是透過這種動態追加的元素，不會綁定那些事件。

所以有兩種解決方案：

1. 在動態載入後重新綁定事件處理程序

2. 一開始就把事件綁定在存在的元素上，依賴事件冒泡。

接下來就是使用jquery的委託方法;

$(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('mouseenter mouseleave', 'p.photo ', function(event)中，在將'p.photo'作為第二個參數的情況下，.on()方法會把this映射到gallery中與該選擇符匹配的元素。指向gallery中的p class= 'photo'的元素。

##或許在你不知道要新增的頁面屬於哪個父級元素的話，可以將$('#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實例程式碼分享

#Javascript事件委託相關詳解

#

以上是jQuery動態追加頁面資料以及事件委託的詳細內容。更多資訊請關注PHP中文網其他相關文章！