javascript - イベントをJqueryして、2回目に呼び出すと機能しません

Question

画像ギャラリーのあるページがあり、jquery wookmark プラグインをフィルタリングで使用しています。次に、プラグイン カラーボックス (wookmark がプラグインの例として既に提供している) も使用したいと思い、カラーボックスとフィルター システムに参加することができました。私の頭の中の問題は、フィルターを適用したときに、50枚の写真を表示する代わりに、5枚しか表示されないことでした。

だから私はこのようにカラーボックスを初期化します:

    $('li a').colorbox({
         rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
    });

次に、フィルターのクリックイベントで、クリックがあったときはいつでも、すべての画像からカラーボックスを削除し、次のように、アクティブなクラスを持つli内のアイテムに対してのみカラーボックスを再度初期化するのが最善の方法だと思いました:

    var onClickFilter = function(event) {

      var item = $(event.currentTarget), activeFilters = [];
      item.toggleClass('active');

      // Collect active filter strings
      filters.filter('.active').each(function() {
        activeFilters.push($(this).data('filter'));
      });

      handler.wookmarkInstance.filter(activeFilters, 'or');       

  //here i remove colorbox from every item
      $.colorbox.remove();        

      //here i instantiate colorbox for active item 
  $('#tiles li.active a').colorbox({
        rel: 'lightbox', scalePhotos: true, maxWidth: '80%', maxHeight: '80%'
      });
    }

そして、これはちょっとうまくいきます！例として、100 枚の画像を含むページをロードすると、カラーボックス ギャラリーには表示する 100 枚の画像が表示されます。フィルターをクリックすると、10 枚の画像が表示されます。カラーボックスは 10 枚の画像を表示します。別のフィルターをクリックして画像を追加します。24 枚の画像が表示されます。カラーボックスはギャラリーを 24 に更新します。それを無効にする最後の同じフィルター、colorbox はもはや 10 個の画像ではなく 24 個の画像を表示します。