Aggiunta dell'evento w/clic HTML utilizzando jQuery

Question

Desidero aggiungere un codice HTML all'interno di questo div e l'HTML deve avere anche un evento click.

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

voglio inserire un nuovo div all'interno del div sopra, e voglio un evento click sul nuovo HTML ci inserisco. Ci sarà del testo dinamico all'interno del nuovo div, quindi deve essere creato dinamicamente.

Come può essere fatto?

Answer 1

Che dire:

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

Answer 2

Come di jQuery 1.3, questo funzionerà:

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


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

vedere di più su eventi dal vivo in questa pagina:

http://docs.jquery.com/Events

Answer 3

Andrew risolvere questo problema per me! Ma .live è deprecato nelle versioni recenti di jquery (a partire da 1.7). Utilizzare. On o .delegate su top.document per associare questi tipi di eventi. Vedi:

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

Congratulazioni amico!

Answer 4

IMPORTANTE:

tener conto che le prestazioni dovrebbero essere meglio se si utilizza il selettore più specifico. Per questo caso, se si desidera riguardano solo l'div all'interno del div "myid", si dovrebbe usare:

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

MOLTO IMPORTANTE:

tener conto che il secondo parametro per il il metodo, in questo caso "div", è facoltativo, ma è necessario fornirlo se si desidera che l'evento venga automaticamente associato agli elementi creati dinamicamente. Questo è chiamato posticipato nella documentazione jquery per il metodo "on". Spero che questa informazione risparmi tempo per qualcuno che legge questo in futuro :)