Appup Dupplicates Первый раз

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