関数initを呼び出すとIsotopeが終了し、次の実行時にリセットされます

Question

私はinitの前/後に関数を実行し、Isotopeがアニメーションを終了すると同時にisotopeが再び関数をリセットするようにそれは新しいレイアウト 'onLayout'を反映しています。同位体が終了すると、次のコードが実行されますが、それは私が探しているものではありません複数回維持し、機能を乗じ： - この中になるよう（それを複製し続けるので、基本的にはリセットしていない

$(".grid").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ 
// the function 
$('.2017').wrapAll('<div class="year2017"></div>'); 
$('.year2017').before('<div class="yeardiv"><h2>2017</h2></div>'); 

}); 
// bind event listener 
$isotope.isotope('on', 'layoutComplete', onLayout);  

を私が望むのは、initで実行するだけで、アイソトープは一旦アイソトープが完成すれば同じ年のクラスで繰り返しdivをグループ化するように、レイアウトを完了したからです。

意味がありますか？

おかげ Glennyboy

Answer 1

私はこの問題は、イベントハンドラ内何であるとは思いません。問題は、イベント（transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd）が複数回呼び出され、ハンドラ内のコードが複数回実行されることです。私は以前にこれらのイベントを使用したことがないので、理由を教えてもらえません。

私はisotopeでも働いていませんが、onArrangeイベントを試してみてください。イベントhereの詳細このイベントは、フィルタされたdivsがUIに配置されると発生します。

だからあなたが試すことがあります。

$(".grid").on('arrangeComplete', function(event, filteredItems) { 
    $('.2017').wrapAll('<div class="year2017"></div>'); 
    $('.year2017').before('<div class="yeardiv"><h2>2017</h2></div>'); 

});