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")，但是这些默认值，会多次提供此警报（），取决于我被称为函数的次数？！

为什么会这样？！我需要总是出现一个警报！

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

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

2 个答案: