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元素上的click事件，则事件处理程序将是：

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

使用fiddle链接。

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

如果使用jquery upper 1.7版本，则可以使用.on（）或live（）函数。关于这些功能的不同，您可以read in this article

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

5 个答案: