jQuery clicca evento il genitore, ma trovare il bambino (cliccato) elemento

Question

diciamo che ho un elemento padre, che ha tanti elementi figlio nidificato all'interno di se stesso:

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

ho già associare un evento click sul genitore:

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

Poiché l'evento viene assegnato l'elemento padre, vedo sempre l'id genitore, però, mi chiedo se non v'è alcun modo possibile per scoprire quale di questo bambino elementi è stato cliccato?

Inoltre, non posso assegnare alcun evento agli elementi figlio o rimuovere il listener di eventi dal padre div.

Answer 1

È necessario passare l'oggetto evento alla funzione per ottenere l'elemento che ha attivato l'evento, event.target fornirà l'elemento di origine.

Live Demo

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

o

Live Demo

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

Modifica

Il primo metodo event.target.id è preferito per il secondo $(event.target).attr('id') per prestazioni, semplicità e leggibilità.

Answer 2

Puoi provare il codice qui sotto. Prova anche il jsfiddle (demo).

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

Try the demo

La risposta alla tua seconda domanda è che si può assegnare evento al bambino e rimuovere dal suo genitore. Controllalo.

.stopPropagation(); 

Impedisce l'evento dalla zampillante l'albero del DOM, prevenendo eventuali gestori genitore dalla notifica della manifestazione. Read more

se si desidera che l'evento specifico che deve essere eseguito solo e lasciare nessun altro evento di essere licenziato si utilizza il codice qui sotto

event.stopImmediatePropagation() 

mantiene il resto dei gestori vengano eseguiti e impedisce l'evento dalla zampillante l'albero DOM. Read more

Spero che questo risolva il problema. Se avete domande per favore non esitate a chiedere. Grazie

Answer 3

Se i tuoi elementi hanno nipoti, c'è un modo migliore per ottenere solo il bambino. Notare il segno maggiore del segno.

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