Zdarzenie kliknięcia Jquery na selektorze zwraca dziecko jako cel

Question

Zaczynam dzisiaj tracić rozum z Jquery, patrzę na inne pytania, ale nic nie działało tak daleko. Mam prostą strukturę html (dodaną dynamicznie w pętli for).

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

używam „na” metodę związać „kliknięcia zdarzenie” z elementami klasy „.emptyCell” z funkcji niestandardowej.

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

    console.log(e.target.id); 

}); 

Ale gdy użytkownik kliknie na div .content (dzieci od emptyCell), łapie wydarzenie, a drukuje Konsola „nieokreślone”, ponieważ elementy .content nie mają identyfikatory tutaj.

Jak to jest możliwe? Czy funkcja .on nie powinna wiązać tylko elementów klasy .emptyCell?

Dzięki za pomoc

Answer 1

e.target odnosi się do rzeczywistego elementu gdzie kliknięcie wydarzyło (może to być handle lub content elementów), jeśli chcesz odnieść emptyCell następnie można użyć this lub e.currentTarget

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

Demo: Fiddle