Zurück divs mit jQuery funktioniert nicht nach dem Ajax-Aufruf

Question

Ich habe zwei Skripte:

1. Die erste ist Bilderkarussel. Es verwendet jQuery slick Slider.
2. Der zweite ist ein Ajax-Skript, das den Inhalt beim Blättern der Seite lädt.

Hier ist mein Code:

function slider() { 
    var $arrows = $('.arrows'); 
    var $next = $arrows.children(".slick-next");  
    var $prev = $arrows.children(".slick-prev"); 

    var slick = $('.your-class').slick({ 
    appendArrows: $arrows 
    }); 

    $('.slick-next').on('click', function (e) { 
    var i = $next.index(this) 
    slick.eq(i).slickNext(); 
    }); 

    $('.slick-prev').on('click', function (e) { 
    var i = $prev.index(this) 
    slick.eq(i).slickPrev(); 
    }); 
} 

$(document).ajaxComplete(slider); 

Unten ist die Scroll-Inhalt Last bei Ajax:

$(document).ready(function(){ 

    function slider() { 

    var $arrows = $('.arrows'); 
    var $next = $arrows.children(".slick-next");  
    var $prev = $arrows.children(".slick-prev"); 

    var slick = $('.your-class').slick({ 
     appendArrows: $arrows 
    }); 

    $('.slick-next').on('click', function (e) { 
     var i = $next.index(this) 
     slick.eq(i).slickNext(); 
    }); 

    $('.slick-prev').on('click', function (e) { 
     var i = $prev.index(this) 
     slick.eq(i).slickPrev(); 
    }); 
    } 

    $(document).ajaxComplete(slider); 

    var flag = 0; 

    $.ajax({ 
    type: "GET", 
    url: "getdata.php", 
    data: { 
     'offset': 0, 
     'limit': 10 
    }, 

    success: function(data){ 
     $('.rowmasonry').append(data); 
     flag += 10; 
    }, 

    }); 

    $(window).scroll(function(){ 
    if($(window).scrollTop() >= $(document).height() - $(window).height()-500){ 
     $.ajax({ 
     type: "GET", 
     url: "getdata.php", 
     data: { 
      'offset': flag, 
      'limit': 10 
     }, 

     success: function(data){ 
      $('.rowmasonry').append(data); 
      flag += 10; 
     }, 

     }); 
    } 

    }); 

}); 

Das Problem ist, dass die ersten 10 Inhalte, die Arbeit richtig geladen werden. Wenn ich jedoch nach unten scrolle und weitere 10 Inhalte kommen, antworten die ersten 10 Inhalte, die geladen wurden, nicht.

Wie binde ich den Bildregler an Ajax, so dass alle Inhalte auf der Seite mit jQuery funktionieren?

Danke für Ihre Hilfe.

Answer 1

Sie fügen nur neue Elemente zu DOM hinzu. Um Slick zu aktualisieren, müssen Sie Slick-Karussell neu initiieren, oder wenn Sie sich über das Slide-Markup sicher sind, können Sie die vom Plugin bereitgestellte Methode slickAdd verwenden.

$.ajax().done(function(data){ $('.your-class').slick('slickAdd', data); });

ref: http://kenwheeler.github.io/slick/