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

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

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