jQuery вызывает после того, как HTML DOM селекторы были обновлены

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>, я добавляю новый якорь в элемент <div> с функцией append () .

И чем, когда я нажимаю на них, просто добавляю новые якоря внутри <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;
});