javascript - 选择器上的jQuery click事件将子级返回为目标

我今天开始对Jquery失去理智，我查找了其他问题，但到目前为止没有任何效果。我有简单的html结构(在for循环中动态添加)。

<div id="cell'+i+'" class="cell emptyCell">
     <div class="handle"></div>
     <div class="content"></div>
</div>

我正在使用“on”方法将“.emptyCell”类的元素的“click事件”与自定义函数绑定(bind)在一起。

$(document).on('click','.emptyCell', function(e){

    console.log(e.target.id);

});

但是，当用户单击.content div(emptyCell的子级)时，它将捕获该事件，并且控制台将打印“undefined”，因为.content元素在此处没有id。

这怎么可能呢 ？ .on函数不应该仅绑定(bind)类.emptyCell的元素吗？

谢谢你的帮助

最佳答案

e.target指的是发生点击的实际元素(可以是handle或content元素)，如果要引用emptyCell，则可以使用this或e.currentTarget

$(document).on('click','.emptyCell', function(e){
    console.log(this.id);
    console.log(e.currentTarget.id);
});

演示:Fiddle

关于javascript - 选择器上的jQuery click事件将子级返回为目标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19454769/