.appendToが適用された後、リンクが機能を失う

Question

'a'リンクがHTML要素に追加されると、応答しなくなるようです。

http://jsfiddle.net/establish/Aqfrf/

HTML

<div class='tag-holder'> 
    <span class='tag'><a href='#' class='tag-value'>Design</a></span> 
</div> 

<div class='tag-tray'> 
</div> 

jQueryの

$(".tag-value").click(function() { 
    $(this).parent().fadeOut("slow", function() { 
    $(this).append('<a href="#" class="tag-delete">x</a>').appendTo(".tag-tray").fadeIn("slow");  
    }) 
}); 

$(".tag-delete").click(function() { 
    alert("This will be displayed only once."); 
}); 

Answer 1

$(".tag-delete").live("click",function() { 
    alert("This will be displayed only once."); 
}); 

DEMO

あなたがあなたの代わりに.live()を使用してみてくださいdelegateまたはlive

DEMO with delegate

jquery live

jquery delegate

Answer 2

を使用する必要があり、その中にDOMに動的に要素を追加しているある理由：

$(".tag-value").live('click', function() { // ... 

Answer 3

代わりにこれを試してみてください

$(".tag-delete").delegate('div.tag-holder','click',function()... 

Answer 4

と

$(".tag-delete").click(function()... 

を交換してください：ここで

$("<a>x</a>").attr({ "href" : "#", "class" : "tag-delete" }).appendTo(".tag-tray"); 

がjsFiddleです：http://jsfiddle.net/X6Ksp/2/