セレクタのJqueryクリックイベントが子をターゲットとして返します

Question

今日、Jqueryで私の心を失い始めていますが、私は他の質問を控えていますが、これまでのところ何もできませんでした。私は単純なhtml構造を持っています（forループで動的に追加されています）。

<div id="cell'+i+'" class="cell emptyCell"> 
    <div class="handle"></div> 
    <div class="content"></div> 
</div> 

"on"メソッドを使用して、クラス ".emptyCell"の要素のクリックイベントをカスタム関数でバインドしています。

$(document).on('click','.emptyCell', function(e){ 

    console.log(e.target.id); 

}); 

しかし、ユーザーが.content divの（emptyCellの子）をクリックしたとき.content要素がここにidを持っていないので、それがイベントをキャッチし、コンソール版画「未定義」。

これはどのように可能ですか？ .on関数は、クラス.emptyCellの要素のみをバインドするはずですか？あなたは、あなたが使用することができますemptyCellを参照したい場合は、あなたの助け

Answer 1

e.targetため

おかげで、クリックは、（それがhandleまたはcontent要素にすることができる）が起こった実際の要素を指しthisまたはe.currentTarget

$(document).on('click','.emptyCell', function(e){ 
    console.log(this.id); 
    console.log(e.currentTarget.id); 
}); 

デモ：Fiddle