javascript - セレクターの 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 の要素のみをバインドすることになっていませんか?

ご協力いただきありがとうございます

Answer 1

e.targetクリックが発生した実際の要素を参照します (handleまたはcontent要素である可能性があります)。参照したい場合は、またはemptyCellを使用できます。thise.currentTarget

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

デモ:フィドル