jQuery lightslider插件寻呼机onclick事件

Question

我想获得jquery lightslider插件的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事件没有触发，我可能知道我做了什么错误。

Answer 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，其中回调已添加到插件代码

中