在附加项目时，如何使旋转木马上的单击函数工作？

Question

我在http://belmontfeed.com/site/有一个(非常原始的)测试站点，在那里我试图让右边的垂直旋转木马控制左边的照片。

上一个/下一个按钮正常工作，通常单击一个旋转木马项目将加载与其相关的照片，但是每当我在旋转木马上allowWrap时，单击就不再起作用了。

我认为这是因为追加/预置使点击函数所依赖的计数混乱，但我对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

修好了！通过快速修复并将操作员从“-”切换到“%”，我能够实现我想要的结果。要将其设置为动态数字，我只需将8个out替换为一个变量，该变量表示循环的posts数。

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

Answer 2

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

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

这样，jquery每次都会查找对象，而不管它是否已被修改/追加/等等。

希望这能有所帮助！