點擊下一個具有特定類的活動元素，觸發功能

Question

我有一個滑塊，其中有一些面板可以使用箭頭滑入和滑出。下一個箭頭的功能是這樣的：

var element = $('.projects .popup.active'),  
    next = $('.slider.projects #next'), 
    prev = $('.slider.projects #prev'), 
    oleft = element.offset().left, 
    oright = ($(window).width() - (element.offset().left + element.outerWidth())); 

next.unbind("click").on('click', function(e){ 
     e.preventDefault(); 
     $(document).scrollTop(0); 
     $('.projects .popup').not(element).removeClass('active'); 
     element.next('.popup').addClass('active'); 
     element.prevAll('.popup').css({zIndex: -1}); 
     element.prevAll('.popup').css({left:'-100%', margin: 0}); 
     element.nextAll('.popup').css({left:'100%', margin: 0}); 

     element.removeClass('active'); 
     element = $('.projects .popup.active'); 

     element.animate({ 
      left: '50%', 
      marginLeft: -352.5 
     },500); 
     element.next('.popup').animate({ 
      left: $(window).width() - (oright/2), 
      marginLeft: 0 
     },500); 
     element.prev('.popup').animate({ 
      left: - elemWidth + (oleft/2), 
      marginLeft:0 
     }, 500); 
     checkarrow(); 
    }); 

我想也下一首或上可見的面板上點擊時，next和prev功能被觸發。所以，接下來的面板，我已經做到了這一點：

element.next('.popup').on('click', function(e){ 
    next.trigger('click'); 
}); 

也能正常工作的第一次，但第二次，點擊僅適用於第一

element.next('popup') 

已被點擊第一次。該類活動更新正常，但點擊在下一個面板上不起作用。我找不出解決方案。

這裏是一個小提琴http://jsfiddle.net/3sSz2/

任何幫助將非常感激。 在此先感謝

更新

感謝f00bar我已經成功地使下框細滑動。之前的那些雖然沒有按預期工作。問題應該來自第100行，可能是第103行這個小提琴http://jsfiddle.net/3sSz2/11/。

單擊下一個框（右側的那個）或下一個箭頭時，下一張幻燈片會滑入，然後再次下一張幻燈片會執行相同的操作。當點擊中央主動式幻燈片時，不會發生任何事情。當點擊上一個箭頭或前一個框（左側）時，左側的框應滑動到中央，中央框應向右移動。

請幫忙，我知道我快到了。由於

Answer 1

最後，這是我結束了，我希望這將有助於考慮我花在編寫THIS fiddleOo

的時候我附.slider元素上單擊處理，以避免多重聽衆.. 這裏它是處理程序。

$('.slider').click(function (e) { 
    var $slider = $(this), 
     data = $slider.data('slider'), 
     $slides = $slider.find('.popup'), 
     $first = $slides.eq(0), 
     $last = $slides.last(), 
     $activeItem = $slides.filter('.active'), 
     $next = $('.popup-nav.next', this), 
     $prev = $('.popup-nav.prev', this), 
     $t = $(e.target).closest('.popup, .popup-nav'), 
     $nextItem = $activeItem.next('.popup'), 
     $prevItem = $activeItem.prev('.popup'), 
     way = (
      // Is the target be the next item in the DOM or the 'next arrow' 
      ($t.is('.popup-nav.next') || $t.is($nextItem)) ? -1 : 
      // Is the target be the next item in the DOM or the 'prev arrow' 
      ($t.is('.popup-nav.prev') || $t.is($nextItem)) ? 1 : 0 
     ); 

    switch (way) { 
    // previous 
    case 1: 
     // if the active slide is the last project 
     if ($activeItem.is($first)) { 
      $first.before($last.css({ 
       left: +($first.css('left').replace('px', '')) - data.width 
      })); 
     } 
     $activeItem.removeClass('active').prev().addClass('active'); 
     play.call($slides, { 
      way: way, 
      width: data.width 
     }); 
     break; 
    // next 
    case -1: 
     // if the active slide is the last project 
     if ($activeItem.is($last)) { 
      $last.after($first.css({ 
       left: +($last.css('left').replace('px', '')) + data.width 
      })); 
     } 
     $activeItem.removeClass('active').next().addClass('active'); 
     play.call($slides, { 
      way: way, 
      width: data.width 
     }); 
     break; 
    } 
});