JQuery单击使用Ajax添加的元素

Question

我有一个带有c类的div，我正在使用Ajax向这个类添加一些代码，所以它最终看起来像：

<div class="c">
  <div class="del" id="1"></div>
  <div class="del" id="2"></div>
  <div class="del" id="3"></div>
</div>

我的班级c是静态的，使用Ajax添加类delete的div。现在我想要的是获取我点击的类delete的div的id。

我是第一次做的：

$(".delete").click(function(){
    var id = $(this).attr('id');
    }
);

但这不起作用。后来我发现我们应该使用.on()来添加使用Ajax添加的内容。根据我的理解，我采用以下方式实施：

$(".c").on('click','.delete',function(){
    var id = $(".delete").attr('id');
    }
);

但是这给了我第一次删除的id。请有人请提供一种方式，以便我可以获得我点击的删除的id，假设内部div，即：

<div class="del" id=i></div>

使用Ajax添加

。谢谢。

Answer 1

您不必再次使用.delete重新选择$('.delete')集合。 .attr方法作为元素集合的getter调用，返回集合中第一个元素的属性值。在您的情况下，您已经将当前单击的元素引用为this。试试这个：

$(".c").on('click','.delete', function() {
    var id = this.id;
});

此外，您可以访问id作为HTMLElement属性，因此您无需阅读其属性。