jQuery ajoute dynamiquement les données de page et la délégation d'événements

Cet article présente principalement en détail les informations pertinentes sur l'ajout dynamique des données de page et la délégation d'événements. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

La tâche que nous voulons effectuer est qu'il y ait des images au début de la page. Nous avons un lien Plus de photos en bas. Après avoir cliqué, certaines images seront chargées sur la page actuelle. lien à nouveau et continuez le chargement jusqu'à ce que la page répertoriée se charge et que le lien disparaisse.

Le premier rendu est le suivant :

Ceci ne capture que la partie inférieure de la page. Lorsque la souris survole l'image, le texte apparaîtra et lorsque la souris sera déplacée, le texte disparaîtra.
Ce que nous devons faire maintenant est de charger une autre partie des données en cliquant sur le lien Plus de photos ci-dessous, puis de cliquer pour charger une autre partie des données jusqu'à ce que les données soient chargées.
Tout d'abord, le code dans le corps est le suivant :

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

Ensuite, écrivez plusieurs extraits de code HTML dans le même répertoire racine pour le chargement.

Par exemple, j'ai un code 1.html comme suit

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

Dans ce fragment HTML, j'ai introduit 6 images. D'autres fragments tels que 2.html, etc. peuvent être écrits selon celui ci-dessus. Après avoir défini de nombreux fragments HTML, utilisez jQuery pour ajouter dynamiquement des données.

Introduisez d'abord une bibliothèque 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();
      }
      }
    })
  });

Ce qui précède Le code peut ajouter dynamiquement des données à la page.

Mais l'erreur suivante apparaîtra dans le navigateur Google :

jquery.js:8475 XMLHttpRequest ne peut pas charger le fichier:///C:/Users/%E9%95 %BF% E5%AD%99%E4%B8%B9%E5%87%A4/Desktop/webtest/1.html Les requêtes d'origine croisée ne sont prises en charge que pour les schémas de protocole : http, data, chrome, chrome-extension, https .

Testé dans l'environnement IE10, pas de problème.

La solution est d'installer un serveur web, puis de copier le fichier dans le projet et d'y accéder via le chemin dans le serveur web, et il n'y aura aucun problème ! Cela ressemble à http://localhost:8080/ajax/ajaxLoad.html

En raison de l'événement de survol de la souris, lorsque nous passons la souris sur une image, du texte apparaîtra, le texte sur l'image disparaît une fois déplacé.

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

Ou vous pouvez combiner les codes ci-dessus pour réduire le code redondant :

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

Quand Quand nous utilisons les deux codes ci-dessus pour ajouter des événements de survol de la souris à chaque image, seules les images de la page initiale seront liées à l'événement, mais l'événement ne sera pas lié aux images chargées dynamiquement. Étant donné que les gestionnaires d'événements ne sont ajoutés qu'aux éléments qui existent déjà lorsque la méthode est appelée, les éléments ajoutés dynamiquement de cette manière ne seront pas liés à ces événements.

Il y a donc deux solutions :

1. Relier le gestionnaire d'événements après le chargement dynamique

2 Lier l'événement au début Sur les éléments existants, s'appuie sur. événement bouillonnant.

L'étape suivante consiste à utiliser la méthode déléguée de 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', fonction (événement), avec 'p.photo' comme deuxième paramètre, la méthode .on() mappera cela à l'élément de la galerie qui correspond au sélecteur. p class= 'photo' dans la galerie

Donc, dans la dernière page ajoutée, comme ce sont tous des éléments sous la galerie, les événements correspondants seront ajoutés à chaque image >

Peut-être si vous ne le faites pas. Si vous ne savez pas à quel élément parent appartient la page que vous souhaitez ajouter, vous pouvez remplacer '#gallery' dans $('#gallery').on() par un document pour ne pas avoir à vous inquiéter. est l'ancêtre de tous les éléments de la page, mais l'utilisation de document présente des inconvénients :

Lorsque la structure imbriquée du DOM est profonde, les événements bouillonnent à travers un grand nombre d'éléments ancêtres entraîneront des performances importantes.

Mais il y a d'autres raisons pour lesquelles nous choisissons document comme portée de délégation

De manière générale, il ne sera donné que lorsque l'élément DOM correspondant est chargé. C'est pourquoi nous mettons le gestionnaire d'événements. code à l'intérieur de $(document).ready(function(){}. Mais l'élément de document est appelé presque immédiatement lors du chargement de la page. Mettez le gestionnaire La liaison au document n'a pas besoin d'attendre que la construction complète du DOM soit terminée. Par exemple , le code ci-dessus peut s'écrire : '

Parce qu'il n'attend pas que l'ensemble du document soit prêt, il peut garantir que tout est prêt 122f2ebbcf8b6c4a06988939e97e9c9a Tant que l'élément est présenté sur la page, les comportements mouseenter et mouseleave peuvent être appliqués

Ce qui précède contient toutes les connaissances sur l'utilisation de jQuery pour ajouter dynamiquement des données et des événements de page. délégation. Code source ;

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

Recommandations associées :

  
  
  

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

Explication détaillée du modèle de délégation des modèles de conception PHP

Partage d'exemples de code natif JS et jQuery sur la délégation d'événements en JavaScript

Explication détaillée de la délégation d'événements Javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!