Ajout d'un événement HTML avec un clic à l'aide de jQuery

Question

Je souhaite ajouter du code HTML dans cette div, et le code HTML doit également contenir un événement click. Je veux insérer un nouveau div à l'intérieur de la div ci-dessus, et je veux un événement de clic sur le nouveau HTML que j'insère là-bas. Il y aura du texte dynamique à l'intérieur du nouveau div, il doit donc être créé dynamiquement.

Comment cela peut-il être fait?

Answer 1

Qu'en est-:

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

Answer 2

À partir de jQuery 1.3, cela fonctionnera:

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


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

En savoir plus sur les événements en direct sur cette page:

http://docs.jquery.com/Events

Answer 3

Andrew résoudre ce problème à moi! Mais .live est obsolète dans les versions récentes de jquery (à partir de la version 1.7). Utilisez .on ou .delegate sur top.document pour lier ces types d'événements. Voir:

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

Félicitations mon ami!

Answer 4

IMPORTANT:

prendre en compte que la performance devrait être mieux si vous utilisez le sélecteur plus spécifique. Dans ce cas, si vous voulez seulement affecter les divs à l'intérieur du div « monId », vous devez utiliser:

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

TRÈS IMPORTANT:

prendre en compte que le second paramètre pour la sur la méthode, Dans ce cas, "div" est facultatif, mais vous DEVEZ le fournir si vous souhaitez que l'événement soit automatiquement associé aux éléments créés de façon dinamique. Ceci est appelé différé dans la documentation de jquery pour la méthode "on". J'espère que cette info fait gagner du temps pour quelqu'un qui lit ceci à l'avenir :)