HTML DOM选择器更新后的jQuery调用

Question

准备好文档后，我将通过以下方式准备对某些元素的单击功能：

var divs = $("div a");
divs.click(function(){
  alert("clicked");

  return false;
});


var spans = $("span a");
spans.click(function(){
  $("div").append("<a>Another link</a>");
  alert("done");

  return false;
});

如您所见，当用户单击<span>内的链接时，我将使用append（）函数将新的锚点附加到<div>元素中。

而且，当我单击它们时，只是在 <div> 内附加了新的锚点 ，我没有得到 alert("clicked") ，这必须是吗？ 但是，当单击尚未添加的默认锚点时，警报仍对其起作用吗？

---

比起将包装第一部分的代码更改为函数：

function activateClick(){
  var divs = $("div a");
  divs.click(function(){
    alert("clicked");

    return false;
  });
}

// calling a function when page has been loaded
// to allow clicking on default anchors
activateClick();

var spans = $("span a");
spans.click(function(){
  $("div").append("<a>Another link</a>");

  // calling a function when new anchors appended
  activateClick();
  alert("done");

  return false;
});

最后，已添加到<div>新锚点给出了alert("clicked") ，但是那些默认锚点给此alert（）的次数超过了一次 ，具体取决于我被访问过多少次。叫做功能？！

为什么这样？！ 我需要始终出现一个警报！

Answer 1

在此处使用.live() ，以便在以后创建的锚上起作用：

$("div a").live("click", function(){
  alert("clicked");    
  return false;
});

$("span a").click(function(){
  $("div").append("<a>Another link</a>");
  alert("done");
  return false;
});

如果您总是有那个<div> ，那么请改用.delegate() ，它便宜一些，如下所示：

$("div").delegate("a", "click", function(){
  alert("clicked");    
  return false;
});

Answer 2

var spans = $("span a");

spans.click(function(){
  var __a = $("<a>Another link</a>").appendTo("div");
  __a.click(function() {
      alert("clicked");
      return false;
  });
  alert("done");
  return false;
});