jQuery fügt Seitendaten und Ereignisdelegierung dynamisch hinzu

In diesem Artikel werden hauptsächlich die relevanten Informationen zum dynamischen Anhängen von Seitendaten und zur Ereignisdelegierung vorgestellt. Interessierte Freunde können darauf verweisen.

Die Aufgabe, die wir ausführen möchten, besteht darin, dass am Anfang der Seite einige Bilder angezeigt werden. Klicken Sie auf den Link „Weitere Fotos“. Verlinken Sie erneut und fahren Sie mit dem Laden fort, bis die aufgelistete Seite geladen wird und der Link verschwindet.

Das erste Rendering sieht wie folgt aus:

Dadurch wird nur der untere Teil der Seite erfasst. Wenn Sie mit der Maus über das Bild fahren, erscheint Text, und wenn Sie die Maus herausbewegen, verschwindet der Text.
Was wir jetzt tun müssen, ist, einen anderen Teil der Daten zu laden, indem wir unten auf den Link „MehrFotos“ klicken, und dann auf „Laden eines anderen Teils der Daten“ zu klicken, bis die Daten geladen sind.
Zuerst lautet der Code im Textkörper wie folgt:

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

Schreiben Sie dann mehrere HTML-Codeausschnitte zum Laden in dasselbe Stammverzeichnis.

Zum Beispiel habe ich einen 1.html-Code wie folgt

<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 diesem HTML-Fragment habe ich 6 Bilder eingeführt. Andere Fragmente wie 2.html usw. können so geschrieben werden, dass sie das obige nachahmen. Nachdem Sie viele HTML-Fragmente definiert haben, verwenden Sie jQuery, um Daten dynamisch anzuhängen.

Stellen Sie zunächst eine JQuery-Bibliothek vor: 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();
      }
      }
    })
  });

Das Obige Der Code kann Daten dynamisch an die Seite anhängen.

Aber der folgende Fehler wird im Google-Browser angezeigt:

jquery.js:8475 XMLHttpRequest kann Datei:///C:/Users/%E9%95 %BF% nicht laden E5%AD%99%E4%B8%B9%E5%87%A4/Desktop/webtest/1.html Cross-Origin-Anfragen werden nur für Protokollschemata unterstützt: http, data, chrome, chrome-extension, https .

Getestet in der IE10-Umgebung, kein Problem.

Die Lösung besteht darin, einen Webserver zu installieren, dann die Datei in das Projekt zu kopieren und über den Pfad im Webserver darauf zuzugreifen, und es wird kein Problem geben! Es sieht so aus: http://localhost:8080/ajax/ajaxLoad.html

Aufgrund des Mouse-Hover-Ereignisses wird Text angezeigt, wenn wir mit der Maus über ein Bild fahren auf dem Bild verschwindet beim Herausziehen.

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

Oder Sie können die oben genannten Codes kombinieren, um redundanten Code zu reduzieren:

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

Wann Wann Wir verwenden die beiden oben genannten Codes, um jedem Bild Mausbewegungsereignisse hinzuzufügen. Nur die Bilder auf der Startseite werden an das Ereignis gebunden, das Ereignis wird jedoch nicht an die dynamisch geladenen Bilder gebunden. Da Ereignishandler nur zu Elementen hinzugefügt werden, die zum Zeitpunkt des Aufrufs der Methode bereits vorhanden sind, sind an Elemente wie solche, die über diese Methode dynamisch angehängt werden, diese Ereignisse nicht gebunden.

Es gibt also zwei Lösungen:

1. Binden Sie den Ereignishandler nach dem dynamischen Laden erneut.
2. Binden Sie das Ereignis zu Beginn an Ereignis sprudelt.

Der nächste Schritt besteht darin, die Delegate-Methode von jquery zu verwenden;

$(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', Funktion (Ereignis), mit 'p.photo' als zweitem Parameter ordnet die .on()-Methode dies dem Element in der Galerie zu, das mit dem Selektor übereinstimmt. Mit anderen Worten: Dies ist das Element mit p class= 'photo' in gallery.

Da es sich also um alle Elemente unter der Galerie handelt, werden jedem Bild entsprechende Ereignisse hinzugefügt >

Vielleicht, wenn Sie es nicht tun Wenn Sie nicht wissen, zu welchem ​​übergeordneten Element die Seite gehört, die Sie hinzufügen möchten, können Sie „#gallery“ in $('#gallery').on() durch „document“ ersetzen, sodass Sie sich keine Sorgen machen müssen, dass es sich um ein „document“ handelt ist der Vorfahre aller Elemente auf der Seite, die Verwendung von document weist jedoch Nachteile auf:

Wenn die verschachtelte DOM-Struktur tief ist, sprudeln Ereignisse durch. Eine große Anzahl von Vorfahrenelementen führt zu einer hohen Leistung Strafe.

Aber es gibt noch andere Gründe, warum wir document als Delegationsbereich wählen.
Im Allgemeinen wird es nur dann angegeben, wenn das entsprechende DOM-Element geladen wird. Aus diesem Grund setzen wir Code innerhalb von $(document).ready(function(){}. Das Dokumentelement wird jedoch fast sofort aufgerufen, wenn die Seite geladen wird. Wenn Sie den Handler an das Dokument binden, müssen Sie nicht warten, bis die vollständige DOM-Konstruktion abgeschlossen ist. Zum Beispiel , der obige Code kann wie folgt geschrieben werden: '

Da nicht gewartet wird, bis das gesamte Dokument fertig ist, kann sichergestellt werden, dass alles fertig ist. p class= 'photo'>Solange das Element auf der Seite angezeigt wird, können Sie die Verhaltensweisen „mouseenter“ und „mouseleave“ anwenden.

Das Obige enthält alle Kenntnisse über die Verwendung von jQuery zum dynamischen Anhängen von Seitendaten und Ereignissen Delegation. Quellcode;

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

Verwandte Empfehlungen:

  
  
  

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

Detaillierte Erläuterung des Delegationsmusters von PHP-Entwurfsmustern

Teilen von nativem JS- und jQuery-Beispielcode zur Ereignisdelegierung in JavaScript

Detaillierte Erläuterung der Javascript-Ereignisdelegierung

Das obige ist der detaillierte Inhalt vonjQuery fügt Seitendaten und Ereignisdelegierung dynamisch hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!