jQuery evento click en el elemento principal, pero encontrar al niño (clic)

Question

elemento

Digamos que tengo un elemento de matriz que tiene tantos elementos secundarios anidados dentro de sí mismo:

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

ya he enlazar un evento click en la matriz:

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

Debido a que el caso se asigna al elemento padre, siempre veo el ID de padre, sin embargo, me pregunto si hay alguna manera posible averiguar cuál de estos elementos secundarios ha sido hizo clic?

Tampoco puedo asignar ningún evento a los elementos secundarios o eliminar el detector de eventos del div principal.

Answer 1

Necesita pasar el objeto de evento a la función para obtener el elemento que activó el evento, event.target le dará el elemento de origen.

Live Demo

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

o

Live Demo

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

Editar

Se prefiere el primer método event.target.id al segundo $(event.target).attr('id') por su rendimiento, simplicidad y legibilidad.

Answer 2

Puede probar el siguiente código. Pruebe también jsfiddle (demo).

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

Try the demo

La respuesta a la segunda pregunta es que se puede asignar evento para el niño y retirar de su padre. Mira esto.

.stopPropagation(); 

Previene el caso de burbujeando el árbol DOM, evitando cualquier manipuladores de los padres de haber sido notificado del evento. Read more

si desea que el evento específico a ser ejecutado y permitir que ningún otro evento para ser disparado utiliza código de abajo

event.stopImmediatePropagation() 

mantiene el resto de los manipuladores de ser ejecutado y evita que el evento desde burbujeando el árbol DOM. Read more

Espero que esto resuelva su problema. Si tiene alguna pregunta, no dude en preguntar. Gracias

Answer 3

Si sus elementos tienen nietos, hay una mejor manera de obtener solo el niño. Tenga en cuenta el signo mayor que.

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