在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/