jQuery点击事件触发但e.target.id为空问题咨询

首先得戳破你遇到的核心问题：你点击标记时，事件的目标元素并不是那个被添加了唯一ID的.pin容器div。

你用pin.uniqueId()是给外层的<div class="pin">生成并添加了唯一ID，但实际点击标记的时候，你的鼠标大概率点在了里面的<img class="pin-img">标签上——这个img标签并没有被设置ID，所以e.target.id自然就为空了。

给你几个简单直接的解决办法：

方案1：直接用this获取绑定事件的元素 #

因为你的事件是委托给#pic_pin来处理.pin的点击，所以this指向的就是你真正想要的那个.pin div（不管你点的是div本身还是里面的img），直接拿它的ID就行：

$('#pic_pin').on('click', '.pin', function(e){
    console.log('log: '+ this.id);
    // 也可以用jQuery的写法：$(this).attr('id')
    // 后续逻辑...
});

方案2：使用e.currentTarget替代e.target #

e.currentTarget指向的是绑定了当前事件处理函数的元素，也就是.pin div，和this的作用完全一致，用它也能拿到正确的ID：

$('#pic_pin').on('click', '.pin', function(e){
    console.log('log: '+ e.currentTarget.id);
    // 后续逻辑...
});

额外小提示 #

jQuery的uniqueId()方法只会给你调用它的元素（也就是你创建的<div class="pin">）添加唯一ID，格式是ui-id-xxx，并不会自动给里面的子元素也加ID。下次遇到类似事件目标不符的问题，不妨先console.log(e.target)看看实际触发事件的元素到底是什么，排查起来会快很多~

内容的提问来源于stack exchange，提问作者linuxoid