jQuery alert onclick en el hijo del elemento?

Question

Estoy usando este código para mostrar una alerta en un cierto elemento:

$("#resultsBox").click(function (event) { 
    console.log('a'); 
    }); 

Quiero mostrar una alerta sólo cuando se hace clic en los elementos 'li' dentro '' #resultsBox.

Estoy tratando de hacerlo de esta manera:

$("#resultsBox li").click(function (event) { 
    console.log('a'); 
    }); 

Esto se estructura #resultsBox del elemento:

<div id="resultsBox"> 
    <ul> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 

¿Cómo puede hacerse esto?

Answer 1

Al enlazar un controlador de eventos con .click() se aplica a todos los elementos que coincidan con su selector de en ese momento, no a los elementos añadidos posteriormente de forma dinámica.

Dado el div se llama "resultsBox", parece razonable suponer que en realidad se está agregando cosas a ella de forma dinámica para mostrar los resultados de alguna otra operación, en cuyo caso es necesario utilizar un controlador de eventos delegada:

$("#resultsBox").on("click", "li", function (event) { 
    console.log('a'); 
}); 

Esta sintaxis del .on() method vincula un controlador a "#resultsBox", pero cuando se produce el clic jQuery comprueba si estaba en un elemento secundario que coincide con el selector "li" en el segundo parámetro; si es así llama a su función, de lo contrario no.

Answer 2

actualización después de edición de preguntas:

<div id="resultsBox"> 
    <ul id="myList"> 
    <li></li> 
    <li></li> 
    </ul> 
</div> 


$("#myList > li").click(function (event) { 

     console.log('a'); 

     }); 

Demo

Answer 3

Algo como esto debería funcionar

$("#resultsBox").find("li").click(function(){ 
    alert("You clicked on li " + $(this).text()); 
}); 

Esto debería funcionar ahora: http://jsbin.com/ocejar/2/edit

Pero de todos modos, también el ejemplo anterior usando $("#resultsBox li") debería funcionar bien. Ver . Sin embargo, usando $("#resultsBox").find("li") debe ser little faster en términos de rendimiento.

Answer 4

$("#resultsBox").find('li').click(function (event) { 
    alert($(this).text()); 
    }); 

Answer 5

Su código como lo tienes debería estar trabajando: http://jsfiddle.net/GxCCb/

Es importante señalar que los elementos que están tratando de conectar el controlador de eventos que debe existir cuando se evalúa el código. Si se agrega en un momento posterior, debe usar on() (v1.7 +) o delegate() (< 1.7), que se utiliza para la delegación de eventos y permite hacer referencia a los elementos si se agregan más tarde ...

Usando

en():

$("#resultsBox").on('click', 'li', function (event) { 
    alert(this.innerHTML); 
    }); 

demostración: http://jsfiddle.net/7Lz2Y/

Usando delegado():

$("#resultsBox").delegate('li', 'click', function (event) { 
    alert(this.innerHTML); 
    }); 

Demostración: http://jsfiddle.net/XwYs5/

Sin embargo, hay un montón de otros métodos para unir el controlador de eventos para elementos que existen antes:

$("#resultsBox").find('li').click(function (event) { 
    alert(this.innerHTML); 
    }); 

Demostración: http://jsfiddle.net/74Q7p/

$("#resultsBox ul > li").click(function (event) { 
    alert(this.innerHTML); 
    }); 

Demostración: http://jsfiddle.net/a28U5/

Answer 6

This s debería funcionar.

$("#resultsBox ul li").click(function (event) { 
    console.log('a'); 
}); 

Answer 7

$("#resultsBox").click(function (event) { 
    if(event.target.tagName.toLowerCase() == "li"){ 
     console.log('a'); 
    } 
}); 

Esto funcionará para los elementos li dinámicamente agregados.