登录  /  注册
首页 > web前端 > js教程 > 正文

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

小云云
发布: 2018-01-12 10:53:39
原创
1149人浏览过

本文主要为大家详细介绍了jquery动态追加页面数据以及事件委托的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

我们要执行的任务是页面起初有一部分图片,我们在底下有一个More Photos的链接,点击后,向当前页面后加载一部分图片,再点击该链接,继续加载,直到将我们列出的页面加载完成,此时该链接也消失了。

首先效果图如下:

这个只截取了最底下的一部分页面。在鼠标悬停在图片上时,还会有文字出现,鼠标移出时文字消失。
我们现在要做的就是点击底下的MorePhotos链接时,再加载一部分数据,然后再点击在加载一部分数据,直到数据加载完。
首先body中代码如下:


<p id = "container">
<h1> Photo Gallery</h1>

<p id = "gallery">
  <p class = "photo">
    <img  src = "./images/1.jpg" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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" alt="jQuery动态追加页面数据以及事件委托" >
    <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();
      }
      }
    })
  });
登录后复制

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

但是在谷歌的浏览器中会出现以下的错误:

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(){
    $(&#39;p .photo&#39;).hover(function(){
      $(this).find(&#39;.details&#39;).fadeTo(&#39;slow&#39;, 0.7);
    },function(){
        $(this).find(&#39;.details&#39;).fadeOut(&#39;slow&#39;);
    })
  });
登录后复制

或者可以将上面的代码组合起来减少冗余代码:


$(document).ready(function(){
  $(&#39;p.photo&#39;).on(&#39;mouseenter mouseleave&#39;, 
      function(event){
      var $details = $(this).find(&#39;.details&#39;);
      if(event.type == &#39;mouseenter&#39;){
        $details.fadeTo(&#39;slow&#39;, 0.7);
        //0.7代表的是透明度
      }
      else{
        $details.fadeOut(&#39;slow&#39;);
      }
    })
});
登录后复制

当我们使用上面的两种代码为每个图片添加鼠标悬浮事件时,只有最初页面上的那些图片才会被绑定事件,而经过动态加载的图片上却没能绑定上事件。因为事件处理程序只会添加到调用方法时已经存在的元素上,像通过这种动态追加的元素,不会绑定那些事件。

所以有两种解决方案:

1. 在动态加载后重新绑定事件处理程序
2. 一开始就把事件绑定在存在的元素上,依赖于事件冒泡。

接下来就是使用jquery的委托方法;


$(document).ready(function(){
    $(&#39;#gallery&#39;).on(&#39;mouseenter mouseleave&#39;, &#39;p.photo&#39;, function(event){

      var $details = $(this).find(&#39;.details&#39;);
      if(event.type == &#39;mouseenter&#39;){
        $details.fadeTo(&#39;slow&#39;, 0.7);
      }
      else{
        $details.fadeOut(&#39;slow&#39;);
      }
    })
  })
登录后复制

$(‘#gallery').on(‘mouseenter mouseleave', ‘p.photo', function(event)中,在将'p.photo'作为第二个参数的情况下,.on()方法会把 this映射到 gallery中与该选择符匹配的元素。换句话说,就是this指向gallery中的 p class= ‘photo'的元素。

所以在最后追加的页面中,由于都属于gallery 下的元素,所以每一个图片都会加上相应的事件。

或许在你不知道要添加的页面属于哪个父级元素的话,可以将$(‘#gallery').on( )中的'#gallery'替换成document。这样就不必担心选错容器。因为document是页面中所有元素的祖先。

但使用document有弊端:

当DOM嵌套结构很深,事件冒泡通过大量的祖先元素会有较大的性能损失。
但是还会有其他的原因让我们选择document作为委托作用域。
一般来说,只有当相应的DOM元素加载完毕,才会给它绑定事件处理程序。这就是为什么我们要把代码放到$(document).ready(function(){}内部的原因。可是document元素是随着页面加载几乎就立即可以调用的。把处理程序绑定到document不用等到完整的DOM构建结束。如上面的代码可以写为:‘


(function($){
    $(document).on(&#39;mouseenter mouseleave&#39;, &#39;p.photo&#39;, function(event){

      var $details = $(this).find(&#39;.details&#39;);
      if(event.type == &#39;mouseenter&#39;){
        $details.fadeTo(&#39;slow&#39;, 0.7);
      }
      else{
        $details.fadeOut(&#39;slow&#39;);
      }
    })
  })(jQuery);
登录后复制

因为没有等到整个文档就绪,所以可以确保所有

元素只要呈现在页面上,就可以应用mouseenter 和mouseleave行为。

上面就是关于利用jQuery动态追加页面数据以及事件委托的全部知识。下面附上源代码;






  动态加载
  
  

  <script>
  $(document).ready(function(){

    var pageNum = 1;
    $("#more-photos").click(function(event){
      event.preventDefault();
      var $link = $(this);
      var url = $link.attr(&#39;href&#39;);
      console.log(url);
      if(url){
        $.get(url, function(data){
          $("#gallery").append(data);
        });

        pageNum ++;
        if(pageNum < 4){
          $link.attr(&#39;href&#39;, &#39;./&#39;+pageNum+&#39;.html&#39;);
        }


      else{
        $link.remove();
      }
      }
    })
  })

  // $(document).ready(function(){
  // $(&#39;p .photo&#39;).hover(function(){
  //   $(this).find(&#39;.details&#39;).fadeTo(&#39;slow&#39;, 0.7);
  // },function(){
  //     $(this).find(&#39;.details&#39;).fadeOut(&#39;slow&#39;);
  // })
  // })

  $(document).ready(function(){
    $(&amp;#39;#gallery&amp;#39;).on(&amp;#39;mouseenter mouseleave&amp;#39;, &amp;#39;p.photo&amp;#39;, function(event){

      var $details = $(this).find(&amp;#39;.details&amp;#39;);
      if(event.type == &amp;#39;mouseenter&amp;#39;){
        $details.fadeTo(&amp;#39;slow&amp;#39;, 0.7);
      }
      else{
        $details.fadeOut(&amp;#39;slow&amp;#39;);
      }
    })
  })

  </script>


Photo Gallery

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

The Cullin Mountains, Isle of skye ....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye .....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye ....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye ...

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye.....

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye ......

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye

12/24/2000

Alasdair Dougall

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

The Cullin Mountains, Isle of skye

12/24/2000

Alasdair Dougall

登录后复制

相关推荐:

详解PHP设计模式之委托模式

JavaScript中关于事件委托的原生JS以及jQuery实例代码分享

Javascript事件委托相关详解

以上就是jQuery动态追加页面数据以及事件委托的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号