Agregar evento HTML w/click usando jQuery

Question

Quiero agregar algo de HTML dentro de este div, y el HTML tiene que tener un evento click también.

<div id="myID"> 
     <p>hello, world!</p> 
    </div> 

Quiero insertar un nuevo div dentro del div anterior, y quiero un evento de clic en el nuevo HTML que inserte allí. Habrá texto dinámico dentro del nuevo div, por lo que debe crearse dinámicamente.

¿Cómo se puede hacer?

Answer 1

¿Qué hay de:

$("#myID").click(
    function() { 
    var someText = "my dynamic text"; 
    var newDiv = $("<div>").append(someText).click(function() { alert("click!"); }); 
    $(this).append(newDiv); 
    } 
) 

Answer 2

A partir de jQuery 1.3, esto va a funcionar:

<div class="myClass"> 
<p>hello, world!</p> 
</div> 


$(".myClass").live("click", function(){ 
    $(this).after("<div class='myClass'><p>Another paragraph!</p></div>"); 
}); 

Ver más acerca de los eventos en directo en esta página:

http://docs.jquery.com/Events

Answer 3

Andrew resolver este problema para mí! Pero .live está en desuso en las versiones recientes de jquery (a partir de 1.7). Utilice .on o .delegate en top.document para vincular estos tipos de eventos. Ver:

$(document).on(".myClass", "click", function(){ 
    $(this).after("<div class='myClass'>Another paragraph!</div>"); 
}); 

¡Felicidades mi amigo!

Answer 4

IMPORTANTE:

tener en cuenta que el rendimiento debe ser mejor si se utiliza el selector más específico. Para este caso, si solo deseas afectan a los divs dentro del div "MyID", se debe utilizar:

$("#MyId").on("click", "div", function(e) { 
    // Whatever you want to do when the divs inside #MyId div are clicked 
}); 

MUY IMPORTANTE:

tener en cuenta que el segundo parámetro para el en el método, en este caso "div", es opcional, pero NECESITA proporcionarlo si desea que el evento se adjunte automáticamente a los elementos creados dinámicamente. Esto se denomina diferido en la documentación de jquery para el método "encendido". Espero que esta información ahorre tiempo para que alguien lea esto en el futuro :)