jqueryでappend（）を使用して追加されたタグのみを削除する方法

Question

私はマウスの上に飛び出しているdivを持っていて、html（）を使っていくつかのコンテンツを挿入しています。そして私はコードの一部を操作なしで残したいと思っています。

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


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

と私はdivを隠しています。

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

私の問題は、私はあなたのコメントに感謝

（私はlivequeryプラグインを使用するカント）jqueryのは、そのタグ

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

のための任意のイベントを割り当てていないので、私は以下のコードを使用するカント、です。

Answer 1

#pop_divの内容全体を置き換えます.HTMLコードを挿入すると、新しいDOM要素が作成されているため、イベントがバインドされません。

スパン要素がDOMから削除され、その要素に関連付けられたイベントが機能しなくなりました。あなたのMouseEnterで

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

：私はあなたがそのdiv要素のすべてのコンテンツを交換する必要はありませんだと思う

、あなたはこのようなあなたのdivを構築することができ

$('#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 
}); 

画像ソースがあります変更され、content変数が'#content' divに挿入されます。

スパン要素には影響しないため、クリックハンドラは現在のように維持されます。

Answer 2

CMSが正しいです。さらにjQuery 1.3を起動すると、あなたのイベントwith the live functionをバインドすることができます。このイベントは、イベントを現在および将来のすべての要素にバインドします。

$('#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 
});