jQuery kliknij zdarzenie na rodzica, ale znalezienie dziecka (kliknięciu) elementem

Question

powiedzmy mam elementu nadrzędnego, który ma tak wiele zagnieżdżonych elementów podrzędnych wewnątrz od siebie:

<div id="p"> 
    <div id="c1"> 
     <div id="c2"></div> 
     <div id="c3"></div> 
    </div id="c4"> 
     <div id="c5"></div> 
    </div> 
</div> 

Już powiązać zdarzenie click na nadrzędny:

$('#p').bind('click', function() { 
    alert($(this).attr('id')); 
}); 

Ponieważ zdarzenie jest przypisane do elementu nadrzędnego, zawsze widzę id rodzica, jednak zastanawiam się, czy istnieje jakikolwiek możliwy sposób, aby dowiedzieć się, który z tych elementów dziecko zostało kliknięte?

Nie mogę również przypisać żadnego zdarzenia do elementów podrzędnych lub usunąć detektora zdarzeń z elementu nadrzędnego div.

Answer 1

Musisz przekazać obiekt zdarzenia, aby uzyskać element, który wywołał zdarzenie, event.target poda ci element źródłowy.

Live Demo

$('#p').bind('click', function(event) { 
    alert(event.target.id); 
}); 

lub

Live Demo

$('#p').bind('click', function(event) { 
    alert($(event.target).attr('id')); 
}); 

Edit

Pierwsza metoda jest bardziej preferowana niż druga pod względem wydajności, prostoty i czytelności.

Answer 2

Możesz wypróbować poniższy kod. Wypróbuj także jsfiddle (demo).

$('#p').on('click', function(event) { 
    alert(event.target.id); 
});​ 

Try the demo

Odpowiedź na drugie pytanie jest można przypisać zdarzenia do dziecka i usunąć z jego rodzicem. Sprawdź to.

.stopPropagation(); 

Zapobiega zdarzenie od propagacji górę drzewa DOM, uniemożliwiając jakiekolwiek teleskopowe macierzyste od otrzymania powiadomienia o zdarzeniu. Read more

jeśli chcesz konkretne zdarzenie, aby być wykonywane tylko i nie pozwalają na inne zdarzenie do opalania użyć kodu poniżej

event.stopImmediatePropagation() 

Utrzymuje resztę ładowarki przed egzekucją i zapobiega zdarzenie od propagacji górę drzewo DOM. Read more

Mam nadzieję, że rozwiąże to Twój problem. Jeśli masz jakieś pytania, nie wahaj się zapytać. Dzięki

Answer 3

Jeśli twoje żywioły mają wnuki, istnieje lepszy sposób na zdobycie tylko dziecka. Zwróć uwagę na znak większy niż znak.

$('.parent > .child').click(function() { 
    // This will be the child even if grandchild is clicked 
    console.log($(this)); 
});