jQuery Lightslider 插件分页器 onclick 事件答案

【问题标题】：jQuery lightslider plugin pager onclick eventjQuery Lightslider 插件分页器 onclick 事件
【发布时间】：2015-12-04 23:16:05
【问题描述】：

我想获取jquery lightslider插件的pager元素的onclick事件，我试过下面的代码，

var $slide = $('#light-slider').parent('.lSSlideWrapper');
var $cSouter = $slide.parent();
var $pager = $cSouter.find('.lSPager').find('li').find('a');            
console.log($pager);
$pager.on('click',function(){
    console.log('test');                
});

pager 的 console.log 打印以下值

[a, a, a, a, prevObject: n.fn.init[4], context: document, selector: ".lSPager li a"]

但是链接onclick事件没有触发，请问我做错了什么。

【问题讨论】：

是否必须在单击按钮时进行，还是在幻灯片切换到下一个或上一个时执行操作就足够了？
其实点击pager时幻灯片会暂停，但我想在10秒后播放
嗯，我不确定我是否跟随。你能做一个 jsFiddle 来显示这个问题吗？
查看此链接sachinchoolur.github.io/lightslider/examples.html
好的，你能详细解释一下你希望它做什么吗？

标签： jquery jquery-plugins slider

【解决方案1】：

您最大的问题是插件绑定到寻呼机控件的函数以 return false; 结尾，这可以防止此事件进一步冒泡，因此在此之后绑定到元素的其他函数不会被调用.

$pager.on('click', function() {
  if (settings.loop === true && settings.mode === 'slide') {
    scene = scene + ($pager.index(this) -

      $cSouter.find('.lSPager').find('li.active').index());
  } else {
    scene = $pager.index(this);
  }
  $el.mode(false);
  if (settings.gallery === true) {
    $this.slideThumb();
  }
  clearInterval(interval);
  return false; // this line prevents any further bubbling for this event so not other functions that are bound to the element after this are going to get called
});

恕我直言，最简单的解决方法是修改插件以添加一个回调函数，如onBeforePageChange，这将允许您执行以下操作：

$('#responsive').lightSlider({
        item:4,
        loop:false,
        slideMove:2,
        easing: 'cubic-bezier(0.25, 0, 0.25, 1)',
        speed:600,
        responsive : [
            {
                breakpoint:800,
                settings: {
                    item:3,
                    slideMove:1,
                    slideMargin:6,
                  }
            },
            {
                breakpoint:480,
                settings: {
                    item:2,
                    slideMove:1
                  }
            }
        ],
        onBeforePageChange: function () { // this is a custom callback we have added
            console.log('onBeforePrevSlide called'); // do what ever you want here, like play the slider after a delay
        }
    });

这是一个working jsFiddle，插件代码中添加了回调

【讨论】：