捕获所有“a”点击，包括动态添加的点击

Question

我知道你可以像这样用jQuery绑定点击事件:

$('a').click(function(){});

但是动态添加的html元素呢?假设我有一个div，其内容如下:

<div>
    <a href='location.html'>location</a>
</div>

现在我调用:

$('a').click(
      function(){ 
          console.log("going to " + $(this).attr('href')); 
          return true;
      });

这样就可以了。但如果我在某处调用

$('div').("<a href='location2.html'>location2</a>");

如果没有显式地将事件处理程序绑定到该事件，那么事件处理程序将拾取它。

是否可以在添加新的a元素时重新绑定?或者更好的是，当location.href属性发生变化时，我可以每次都给它添加一个get参数。

例如，如果我绑定到a元素上的单击事件，事件处理程序将是:

function(){
    var newid = parseInt(Obj.Request('pageid'), 10) + 1;
    location.href = $(this).attr('href') + '?pageid=' + newid.toString();
    return false;
}

假设Obj.Request是一个返回get形参的函数。

Answer 1

按如下方式使用:

$(document).on( 'click', 'a', function() {
      console.log("going to " + $(this).attr('href')); 
      return true;
});

---

制作小提琴链接

Answer 2

您要使用.on函数

Answer 3

$('a').on('click', function() {
    //works on non dynamic elements present at page load
});
$('#some_non_dynamic_parent_ID').on('click', 'a', function() {
    //works on dynamic elements added later
});

Answer 4

您想使用.on()，但是作为一个委托方法。

将它绑定到最接近的静态父节点—在本例中，我只使用body。

$('body').on('click', 'a', function(e){
  e.preventDefault();
});

这将等待，直到事件冒泡到body元素，并检查事件的原始目标是什么-如果它是a元素，它将触发处理程序。

Answer 5

如果使用1.7以上版本的jquery，可以使用。on()或live()函数。关于这些函数的区别，您可以在本文