Question

我有两个脚本：

第一个是图像轮播。它使用jQuery光滑滑块。
第二个是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个内容到来时，加载的前10个内容不响应。

如何将图像滑块绑定到Ajax，以便页面上的所有内容都可以使用jQuery？

感谢您的帮助。

Answer 1

您只是将新元素附加到DOM。为了更新光滑，您需要重新添加光滑的轮播，或者如果您确定幻灯片标记，则可以使用插件提供的slickAdd方法。

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

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

使用jQuery之前的div在Ajax调用之后不起作用

1 个答案: