第一次追加複製

Question

如果有人能夠幫助我，那麼我將面臨2個問題，那將會很棒。

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')單擊處理程序，有兩個後果：

1. 沒有點擊附加處理程序，直到AJAXLoadMorePosts()被稱爲首次。
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); 
     }); 
    } 
});