Dupplicates First Time 처음으로

Question

누군가가 나를 도와 줄 수 있다면 큰 문제가 될 수 있습니다.

1. 추가 버튼을 클릭하면 처음으로 중복 .blog-post를 추가하지만 두 번째 클릭시 정상적으로 작동합니다.
2. 빠른 클릭 또는 더블 클릭으로 동일한 게시물을 반복해서 복제합니다. 서면으로

// AJAX Load More Blog Posts 
    function AJAXLoadMorePosts(){ 
     $('.load-more-posts').click(function(e){ 

      e.preventDefault(); 

      // Variables 
      var element = $(this); 
      var target = element.attr('href'); 
      var post_wrapper = $('.blog-posts-wrapper');     

      // Run AJAX 
      $.ajax({ 
       type: 'GET', 
       url: target, 
       success: function(data, textStatus, XMLHttpRequest) {     

        // Store New Data 
        var new_post_items = $(data).find('.blog-posts-wrapper .blog-post'); 
        var next_page_url = $(data).find('.nav-previous a').attr('href'); 

        // Update Load More Button Href 
        if (next_page_url) { 
         element.attr('href', next_page_url); 
        } else { 
         element.slideUp(); 
        } 


         post_wrapper.append(new_post_items); 


       }, 
       complete: function() { 
        element.html(loadingTextOrg); 
       }, 
       error: function(MLHttpRequest, textStatus, errorThrown){ 
        alert(errorThrown); 
       } 
      }); 

     }); 
    } 

Answer 1

는 AJAXLoadMorePosts() 두 결과와는 $('.load-more-posts') 클릭 핸들러를 첨부 : AJAXLoadMorePosts()가 처음으로 호출 된 때까지

1. 없음 클릭 핸들러가 첨부되지 않습니다.
2. 이후의 호출에서는 AJAXLoadMorePosts()이 점점 더 많은 클릭 핸들러를 부착하게되므로 철저히 바람직하지 않습니다.

해결책은 모든 관련 요소를 클릭 처리기를 연결하는 번 (또는 대리인 랩핑 요소).

또한 Ajax 요청이 아직 진행되지 않은 경우에만 클릭 처리기가 ajax를 수행하도록 테스트를 수행해야합니다.

이와 같이해야합니다.

// AJAX Load More Blog Posts 
$('.load-more-posts').text(loadingTextOrg).on('click', function(e) { 
    e.preventDefault(); 
    var $element = $(this); 
    if($element.text() == loadingTextOrg) { 
     var $element = $(this).text(somethngElse); 
     $.get($element.attr('href')).then(function(data, textStatus, XMLHttpRequest) { 
      var next_page_url = $(data).find('.nav-previous a').attr('href'); 
      if (next_page_url) { 
       $element.attr('href', next_page_url); 
      } else { 
       $element.slideUp(); 
      } 
      $('.blog-posts-wrapper').append($(data).find('.blog-posts-wrapper .blog-post')); 
     }, function(MLHttpRequest, textStatus, errorThrown) { 
      alert(errorThrown); 
     }).always(function() { 
      $element.text(loadingTextOrg); 
     }); 
    } 
});