jQuery는 페이지 데이터와 이벤트 위임을 동적으로 추가합니다.-JS 튜토리얼-php.cn

이 글에서는 페이지 데이터를 동적으로 추가하는 jQuery 관련 정보와 이벤트 위임에 대해 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

우리가 수행하고 싶은 작업은 페이지 시작 부분에 사진이 몇 개 있다는 것입니다. 클릭하면 사진의 일부가 현재 페이지로 로드됩니다. 다시 클릭하고 나열된 페이지가 로드가 완료되고 링크가 사라질 때까지 계속 로드합니다.

첫 번째 렌더링은 다음과 같습니다.

페이지 하단 부분만 캡처합니다. 마우스를 이미지 위로 가져가면 텍스트가 나타나고, 마우스를 밖으로 이동하면 텍스트가 사라집니다.
이제 해야 할 일은 아래의 MorePhotos 링크를 클릭할 때 데이터의 다른 부분을 로드한 다음, 데이터가 로드될 때까지 데이터의 다른 부분을 클릭하여 로드하는 것입니다.
먼저 본문에 있는 코드는 다음과 같습니다.

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

로그인 후 복사

그런 다음 동일한 루트 디렉터리에 여러 개의 HTML 코드 조각을 작성하여 로드합니다.

예를 들어 다음과 같은 1.html 코드가 있습니다

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

로그인 후 복사

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

로그인 후 복사

위 코드는 페이지에 동적으로 데이터를 추가할 수 있습니다.

하지만 Google Chrome에 다음 오류가 표시됩니다.

jquery.js:8475 XMLHttpRequest가 파일을 로드할 수 없습니다:///C:/Users/%E9%95%BF%E5%AD%99%E4 %B8% B9%E5%87%A4/Desktop/webtest/1.html 교차 출처 요청은 http, data, chrome, chrome-extension, https.

IE10 환경에서 테스트되었으며 문제 없는 프로토콜 체계에 대해서만 지원됩니다.

해결 방법은 웹 서버를 설치한 뒤, 해당 파일을 프로젝트에 복사하고, 웹 서버에 있는 경로로 접속하면 문제 없을 겁니다! 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), in 'p.photo' '두 번째 매개변수인 .on() 메소드는 이를 선택기와 일치하는 갤러리의 요소에 매핑합니다. 즉, 이는 갤러리에서 p class= 'photo'인 요소를 가리킵니다. 마지막으로 추가된 페이지는 모두 갤러리 아래의 요소에 속하므로 해당 이벤트가 각 사진에 추가됩니다.

추가하려는 페이지가 어느 상위 요소에 속하는지 모르는 경우 $를 넣을 수 있습니다. 문서가 있는 ('#gallery').on()의 '#gallery'입니다. 이렇게 하면 문서가 페이지에 있는 모든 요소의 조상이기 때문에 잘못된 컨테이너를 선택하는 것에 대해 걱정할 필요가 없습니다. 문서 사용의 단점:

DOM 중첩 구조가 매우 깊으면 이벤트가 다수의 상위 요소를 통해 버블링될 때 큰 성능 손실이 발생합니다.

그러나 문서를 위임 범위로 선택하는 다른 이유가 있습니다.

일반적으로 이벤트 핸들러는 DOM 요소가 로드될 때까지 바인딩되지 않습니다. 이것이 바로 $(document).ready(function(){} 안에 코드를 넣는 이유입니다. 문서 요소는 페이지가 로드될 때 거의 사라집니다. 핸들러는 완전한 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


  

    
    

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

로그인 후 복사