comment supprimer uniquement les balises ajoutées en utilisant append() dans jquery

Question

J'ai une div qui apparaît sur la souris et j'insère du contenu en utilisant html(). Et je veux qu'une partie du code reste sans manipulation.

<div id="pop_div" ><span>X</span></div> 


$("#team_div > ul img").bind('mouseenter',function(){ 
    $("#pop_div").html('<img src="' + img + '"/>' + content); 
}); 

et un clic sur je cache div.

$('#pop_div span').click(function(){ 
    $("#pop_div").hide(); 
}); 

Mon problème est, je ne peux pas utiliser le code ci-dessous parce que jquery n'attribue aucun événement pour cette balise

$("#pop_div").html('<span>X</span><img src="' + img + '"/>' + content); 

(je ne peux pas utiliser livequery plugin)

j'apprécie vos commentaires.

Answer 1

Vous remplacez l'intégralité du contenu de votre #pop_div, lorsque vous insérez du code HTML, de nouveaux éléments DOM sont créés, c'est pourquoi l'événement n'est pas lié.

L'élément span est supprimé du DOM et les événements qui s'y rattachent ne fonctionnent plus.

Je pense que vous n'avez pas besoin de remplacer tout le contenu de cette div, vous pouvez structurer votre div comme ceci:

<div id="pop_div" > 
    <span>X</span> 
    <img/> 
    <div id="content"></div> 
</div> 

Dans votre mouseenter:

$('#team_div > ul img').bind('mouseenter',function(){ 
    $('#pop_div img').attr('src', img); // set the image source 
    $('#pop_div #content').html(content); // display the content 
}); 

La source d'image est modifié et la variable content est insérée dans la div '#content'.

Votre gestionnaire de clic restera tel qu'il est maintenant, car l'élément span n'est pas affecté.

Answer 2

La CMS a raison. Supplémentaire à partir de jQuery 1.3 vous pouvez lier votre événement with the live function qui liera l'événement à tous les éléments actuels et futurs.

$('#team_div > ul img').live('mouseenter',function(){ 
    $('#pop_div img').attr('src', img); // set the image source 
    $('#pop_div #content').html(content); // display the content 
});