jQuery dynamically appends page data and event delegation

This article mainly introduces the relevant information of jQuery dynamically appending page data and event delegation in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The task we want to perform is that there are some pictures at the beginning of the page. We have a More Photos link at the bottom. After clicking, we will load some pictures to the current page. Then click the link and continue loading until we The listed page loads and the link disappears.

The first rendering is as follows:

This only captures the bottom part of the page. When the mouse is hovering over the image, text will appear, and when the mouse is moved out, the text will disappear.
What we have to do now is to load another part of the data when we click on the MorePhotos link below, and then click to load another part of the data until the data is loaded.
First, the code in the body is as follows:

<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>

Then write several HTML code snippets in the same root directory for loading.

For example, I have a 1.html code as follows

<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>

In this HTML fragment, I introduced 6 images. Other fragments such as 2.html, etc. can be written imitating the above one. After defining many HTML fragments, use jQuery to dynamically append data.

First introduce a jquery library 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();
      }
      }
    })
  });

The above code is You can dynamically add data to the page.

But the following error will appear in Google's browser:

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 .

Tested in IE10 environment, no problem.

The solution is to install a web server, then copy the file to the project, access it with the path in the web server, and there will be no problem! It looks like http://localhost:8080/ajax/ajaxLoad.html

Because there is also a mouse hover event, when we hover the mouse over a picture, text will appear , the text on the picture disappears when moved out.

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

Or you can combine the above code to reduce redundant code:

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

When we use the above When the two codes add mouse hover events to each image, only those images on the original page will be bound to the event, but the event will not be bound to the dynamically loaded images. Because event handlers are only added to elements that already exist when the method is called, elements dynamically appended in this way will not have those events bound to them.

So there are two solutions:

1. Rebind the event handler after dynamic loading

2. Bind the event at the beginning On existing elements, relies on event bubbling.

The next step is to use jquery's delegate method;

$(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), when 'p.photo' is used as the second parameter, the .on() method will map this to the element in the gallery that matches the selector. In other words, it is this. Points to the p class= 'photo' element in gallery.

So in the last added page, since they are all elements under gallery, corresponding events will be added to each picture.

Perhaps if you don't know which parent element the page you want to add belongs to, you can replace '#gallery' in $('#gallery').on() with document so you don't have to worry about making the wrong choice. Container. Because document is the ancestor of all elements in the page,

But there are drawbacks to using document:

When the DOM nested structure is deep, events bubble through a large number of Ancestor elements will have a large performance loss.

But there are other reasons why we choose document as the delegation scope.
Generally speaking, it will only be bound when the corresponding DOM element is loaded. Define the event handler. This is why we put the code inside $(document).ready(function(){}. But the document element is called almost immediately as the page loads. Bind the handler There is no need to wait until the complete DOM construction is completed to reach the document. For example, the above code can be written as: '

##

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

Because it does not wait until the entire document is ready, it can ensure that all

As long as the element is presented on the page, the mouseenter and mouseleave behaviors can be applied.

The above is all the knowledge about using jQuery to dynamically append page data and event delegation;# Attached below is the source code.

##

  
  
  

  <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


  

    
    

      
The Cullin Mountains, Isle of skye ....
      
12/24/2000
      
 Alasdair Dougall
    

  


  

    
    

      
The Cullin Mountains, Isle of skye.... 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye.... 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye .....
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye ....
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye ...
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye.... 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye..... 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye ...... 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye 
      
12/24/2000
      
 Alasdair Dougall
    

  



    

    
    

      
The Cullin Mountains, Isle of skye 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye 
      
12/24/2000
      
 Alasdair Dougall
    

  


    

    
    

      
The Cullin Mountains, Isle of skye 
      
12/24/2000
      
 Alasdair Dougall
    

  




 
 More Photos >>
 

Related recommendations:

Detailed explanation of the delegation pattern of PHP design patterns

Sharing native JS and jQuery example code about event delegation in JavaScript

Detailed explanation of Javascript event delegation

The above is the detailed content of jQuery dynamically appends page data and event delegation. For more information, please follow other related articles on the PHP Chinese website!