在Ajax調用之后，帶有jQuery的先前div無法正常工作

Question

我有兩個腳本：

1. 第一個是圖像輪播。 它使用jQuery光滑滑塊。
2. 第二個是Ajax腳本，它在頁面向下滾動時加載內容。

這是我的代碼：

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

以下是使用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;
        },

      });
    }

  });

});

問題在於前十個已加載的內容正常工作。 但是，當我向下滾動時，又有10個內容出現，加載的前10個內容沒有響應。

如何將圖像滑塊綁定到Ajax，以便頁面上的所有內容都可以使用jQuery？

謝謝你的幫助。

Answer 1

您只是將新元素添加到DOM。 為了更新滑動條，您需要重新啟動滑動條傳送帶，或者如果您確定幻燈片標記正確，則可以使用插件提供的slickAdd方法。

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

參考： http : //kenwheeler.github.io/slick/