jQuery：动态追加元素+ .on（）

Question

我有一系列与购买类的HREF。单击时按以下方式覆盖这些：

$('.buy').on('click', function (e) {
     e.preventDefault();
     var me = $(this);
     // other stuff here...

这可以正常工作。当我将更多这些链接动态地附加到DOM时出现问题。单击这些链接时，不会捕获它们。我认为使用 .on（）方法进行绑定可以在JS加载时使用DOM中不存在的项。

不确定为什么，我似乎无法弄明白。使用 .on 的标准点击捕获不能正常工作。

Answer 1

$(document).on('click', '.buy', function(e){
     e.preventDefault();
     var me = $(this);
     // other stuff here...
});

需要将事件委托给静态元素，第二个参数是您希望函数运行的选择器。

你的方式，虽然仍然保持，但不会将它附加到绑定到页面加载的静态元素。

Answer 2

您也可以使用.target功能：

$(document).on('click', '.buy', function(e){
   e.preventDefault();
   var me = $(e.target);
   alert(me.attr('id'));
});

这个未经测试但可能有效：

$('.buy').on('click',function(e){     
   e.preventDefault();
   var me = $(e.target);
   alert(me.attr('id'));
});