如何在窗口大小调整后初始化光滑轮播中的单击事件

时间:2018-06-03 05:49:05

标签: javascript jquery carousel slick.js

我在我的应用程序中使用了光滑的旋转木马,我注意到如果我调整窗口大小并重新绘制光滑的旋转木马,我会在旋转木马内部松开我的点击事件。所以要修复它,我发现了一个名为'setPosition'的光滑事件,我正在使用它,就像这样

$(".slick-event").off('setPosition').on('setPosition', function () {
     yb.register.initializeEventsClickHandlers();
});

我注意到的一个小问题是,当我第一次加载页面时,会调用该事件。当我调整该页面的大小时,它会被多次调用。测试〜2-3次。我可以忍受,但它似乎并不理想!

现在我面临一个更大的问题,我有一个主页面,我将使用光滑的轮播10x所以现在当我调整'setPosition'事件时,可以多次调用〜20或更多。这并不理想,所以我想找出一种更好的方法来重新启动我主页上旋转木马内的所有点击事件。 任何帮助将不胜感激!

这是我目前所拥有的,在下面的代码中,我使用一个类来触发事件'setPosition',并且我已经将该类放在每个光滑的div上。

scope.initializeSlickCarousels = function() {

  $(".slick-event").off('setPosition').on('setPosition', function() {
    yb.register.initializeEventsClickHandlers();

  });

  for (var key in scope.mapData) {
    var eventId = scope.mapData[key]['EventId'];
    $("#slick-event-" + eventId).slick({
      slidesToShow: 3
    });
  }

};

我的点击事件看起来像这样

scope.initializeEventsClickHandlers = function() {

  $(".instruct-button").off('click').on('click', function() {

    // do some stuff

  });

  $(".join-button").off('click').on('click', function() {

    // do some stuff

  });

  $(".student.carousel").off('slide.bs.carousel').on('slide.bs.carousel', function(e) {

    // do some stuff

  });
};

更新 - 我按照此SO链接here提示,我将事件更改为“

scope.initializeEventsClickHandlers = function() {

  $(document).off('click').on('click', ".instruct-button", function () {

    // do some stuff

  });

  $(document).off('click').on('click', ".join-button", function () {

    // do some stuff

  });

  $(document).off('slide.bs.carousel').on('slide.bs.carousel', ".student.carousel", function (e) {

    // do some stuff

  });
};

并且在这样做之后,在调整大小之后,加入和指示事件都会触发,但现在光滑旋转木马内的自举旋转木马不会滑动!即使我使用轮播'.student.carousel'点击事件而不是文档,我也尝试了两种,都没有工作。 仅供参考 - 我在一个光滑的旋转木马里面有一个自举旋转木马。也许我应该把它变成另一个光滑的旋转木马!?浮油光滑?

0 个答案:

没有答案