javascript - append 项目时，如何使轮播上的点击功能起作用？

Question

我有一个(非常原始的)测试站点，位于 http://belmontfeed.com/site/我试图让右侧的垂直轮播来控制左侧的照片。

上一个/下一个按钮工作正常，通常单击轮播项目将加载与其关联的照片，但每当我允许在轮播上包裹时，单击就不再起作用。

我相信这是因为 append/前置弄乱了单击函数所基于的计数，但我对 jQuery 相当陌生，不知道该转向哪里。

完整的代码应该可以在上述网站上查看。任何帮助将不胜感激!

if ( opts.allowWrap !== false ) {
  // prepend and append extra slides so we don't see any empty space when we
  // near the end of the carousel.  for fluid containers, add even more clones
  // so there is plenty to fill the screen
  // @todo: optimize this based on slide sizes
  opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).appendTo( wrap );
  if ( opts.carouselVisible === undefined )
     opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).appendTo( wrap );
  opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).prependTo( wrap );
  if ( opts.carouselVisible === undefined )
     opts.slides.slice(0, opts.slideCount).clone().css( slideCSS ).prependTo( wrap );

  wrap.find('.cycle-slide-active').removeClass('cycle-slide-active');
  opts.slides.eq(opts.startingSlide).addClass('cycle-slide-active');
}

更新:最直接的点击功能代码如下:

$('#cycle-2 .cycle-slide').click(function(){ 
    var index = ($('#cycle-2').data('cycle.API').getSlideIndex(this)-8);   
    slideshows.cycle('goto', index); 
}); 

我添加了一个贫民窟修复，只需将计数减去 8(因为这是前置数)，但一旦达到数字 8，它就会停止运行，直到它自动旋转回 1。一个更可持续的解决方案会很可爱......

Answer 1

使用jquery的新规范，您可以调用

$(document).on('click', '.cycle-carousel-wrap > div', function(e) {...});

这样，jquery 每次都会找到该对象，无论它是否被修改/append/等。

希望这有帮助!