関数を複数回実行することなく遷移終了イベントを複数の要素にバインドする方法はありますか？

Question

私はイメージを含むリストを持っており、私はそれらをCSSトランジションで移動します。

これらの画像は大きいので、私はSafariのちらつきを避けるために、リストの要素にCSSトランジションを使用する必要があります。

$("container").bind("webkitTransitionEnd", function() { 
    doSomething() 
}); 

私はイベントをバインドしようとした：

<ul id="container"> 
    <li class="moveLeft>...</li> 
    <li class="moveLeft">...</li> 
    <li class="moveLeft>...</li> 
    <li class="moveLeft>...</li> 
    <li class="moveLeft>...</li> 
</ul> 

問題は、私は、UL要素にバインドを使用する場合、移行端にバインドさ関数が5回（元素の量）が実行されることですハンドラはリストの2番目の子にありますが、リスト要素が更新され（要素が削除され、追加された）なので、2番目の要素が置き換えられるとイベントハンドラが停止します。

$("container").children().eq(2).bind("webkitTransitionEnd", function() { 
    doSomething() 
}); 

私は解決策が親にイベントハンドラをバインドすることだと思いますが、どのように私の代わりに5の1時間にイベントが発生するたびに関数を実行するために何ができますか？のみ（あなたのケースでは）親李に結合する

Answer 1

： あなたがnth-child()

例：使用することができます：あなたは、より良い、新しい.on()を.live()代わりに.bind()かを使用することができます

$("#container li:nth-child(1)").bind("webkitTransitionEnd", function(event) { 
    doSomething(); 
}); 
function doSomething() { 
    //do something 

} 

Answer 2

を。 .on（）メソッドは、以前のすべてのイベントハンドラの添付ファイル置き換え：http://api.jquery.com/on/

をしかし、あなたの場合には、それがに、<ul>に、一つだけの移行（変換）を使用する（パフォーマンス的に）、より効率的かもしれそれに含まれる<li>のすべてを一緒に移動します。