So laden Sie ein Skript mit jQuery

Question

Ich bin neu hier, also bitte mit mir ertragen. Ich benutze jQuery infinite-scroll, um den Inhalt beim Scrollen zu laden. Während dies gut funktioniert, wird sich dieser Inhalt mit Benutzereingaben unter Verwendung von Ajax ändern. Was ich tun möchte, ist neu zu laden/Refresh Infinite Scroll-Code auf Ajax Inhalt laden.

Dies ist unendlich-Scroll-Code

Plugin: https://infinite-scroll.com/

$('#content').infiniteScroll({ 
    // options 
    path: '#page-nav a', 
    append: '.post', 
    history: false, 
    status: '.page-load-status', 
}); 

Das ist mein Ajax-Code zum Inhalt neu zu laden.

$("#searchContent :input").change(function() { 
    var formData = { 
     'title' : $('input[name=title]:checked').val(), 
     'tags' : $('input[name=tags]').val() 
    }; 
    $.ajax({ 
     type: "POST", 
     url: "get_content.php", 
     data: formData, 
     cache: false, 
     dataType:'json', 
     success: function(json) { 
     $("#content").html(json.content); 
     } 
    }); 
}); 

Alles, was ich tun möchte, ist unendlich Scroll-Code nachladen, wenn Ajax-Post-Funktion ausgeführt wird. Kann mir jemand zeigen, wie ich das erreichen kann? schätzen Sie Ihre Zeit.

Answer 1

Sie müssen neu initiieren Plugin für neuen DOM:

$("#searchContent :input").change(function() { 
    var formData = { 
    'title': $('input[name=title]:checked').val(), 
    'tags': $('input[name=tags]').val() 
    }; 
    $.ajax({ 
    type: "POST", 
    url: "get_content.php", 
    data: formData, 
    cache: false, 
    dataType: 'json', 
    success: function(json) { 
     $("#content") 
     .html(json.content) 
     .infiniteScroll({ 
     // options 
      path: '#page-nav a', 
      append: '.post', 
      history: false, 
      status: '.page-load-status', 
     }); 
    } 
    }); 
}); 

---

Side Noten

Normalerweise unendliche Scroll bedeutet Auto-Seite ohne Paginierung klicken. Aber Sie entfernen nur alte Inhalte und fügen neue hinzu, anstatt an vorhandene Elemente anzuhängen. Was genau versuchst du zu tun?

Versuchen $('form').serialize() statt var formData = {}

Sie Elemente direkt von Json Antwort hinzufügen. Vielleicht versuchen Sie eine Vorlage, wo Sie nur Werte ersetzen?