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;
});