通过ajax添加的链接与初始DOM中存在的链接的行为不同

Question

当用户点击链接时，我用它来生成一个AJAX调用。

$('a').not('.noajax').click(function(event) {
  event.preventDefault();
  AJAXLoad($(this).attr('href'));
}); 

AJAXLoad用于为某些DIV生成新内容。问题在于，当我生成具有链接的新内容时，新生成的链接的行为与我对上述代码的期望不同。

我知道这可能是因为新添加的内容没有旧属性（遇到与shadowbox插件图像链接类似的问题），但我在JS中不够熟练，无法修改我的代码以使其正常工作。有帮助吗？

Answer 1

您需要使用事件委派。

$(document).delegate("a:not(.noajax)","click",function(e){
    // do stuff
})

或1.7.2 +

$(document).on("click","a:not(.noajax)",function(e){
    // do stuff
})

您还应将document替换为您用作AJAXLoad目标的任何元素。

Answer 2

$.click(function() {})仅适用于评估该行代码时页面上存在的元素。

您想使用$.live('click', function() {})

$.live()会关注应该应用的所有新元素。

---

编辑：明确拼写 -

$('a').not('.noajax').live('click', function(event) {
    event.preventDefault();
    AJAXLoad($(this).attr('href'));
});