Question

我知道，有人在SO上多次问过这个问题（例如here），但对我没有任何帮助。

我通过ajax进行了JSON导入。这将导入光滑滑块的数据。因此，应该在ajax导入完成后初始化光滑的滑块。

我的代码：

  // Import Ticker
  $.ajax({
      url: '/de/data/data.json',
      type: 'GET',
      datatype: 'json'
  }).success(function (data) {
      for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          $('section.ticker .slider').append(`
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
          `)};

      $(document).on('ready', function() {
        $('.slider').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });
      });

      // Error handler
      }).error(function (err) {
          console.log(err);
      })

我也尝试过：

  }).success(function (data) {
      for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          $('section.ticker .slider').append(`
            <div class="slide">1</div>
            ...
          `)};
      }.complete: function (data) {
        $('.slider').slick({
          infinite: ...
        });
      }).error(function (err) {
          console.log(err);
      })

或者这个：

$( document ).ajaxStop(function() {
  $('.slider').slick({
     infinite: ...
  });
});

Answer 1

请从$(document).on('ready',function(){});删除精巧的初始化

您的代码如下

$.ajax({
      url: '/de/data/data.json',
      type: 'GET',
      datatype: 'json'
  }).success(function (data) {
      for (var i = 0; i < data.length; i++) {
          var obj = data[i];
          $('section.ticker .slider').append(`
            <div class="slide">1</div>
            <div class="slide">2</div>
            <div class="slide">3</div>
          `)};

        $('.slider').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3
        });

      // Error handler
      }).error(function (err) {
          console.log(err);
  })

Ajax调用完成后执行功能

1 个答案: