应用.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

请尝试使用.live()：

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

Answer 2

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

DEMO

原因是您要将元素动态附加到DOM，因为您必须使用delegate或live

DEMO with delegate

jquery live

jquery delegate

Answer 3

替换

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

与

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

Answer 4

请改为尝试：

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

这是一个jsFiddle：http://jsfiddle.net/X6Ksp/2/