Question

我有这个：

<div id="pic_pin">
    <div id="selected_picture">
        <img src="map.png" />
    </div>
</div>

我在点击地图图片时添加标记图片：

$('#selected_picture').on('click', function(e){
    offset = $('#selected_picture').offset();
    x = e.pageX - offset.left - 25;
    y = e.pageY - offset.top - 25;
    var pin = $('<div class="pin"><img class="pin-img" data-left="' + x + '" data-top="' + y + '" src="pin.png" /></div>');
    pin.uniqueId();
    $('#pic_pin').append(pin);
    pin.css('left', x).css('top', y).show();
});

然后点击标记图像（div）我想打开一个弹出窗口：

$('#pic_pin').on('click', '.pin', function(e){
    console.log('log: '+e.target.id);
    ...
});

问题是e.target.id为空 - 它只显示'log：'，不显示id。为什么呢？

Answer 1

您需要使用https://www.youtube.com/embed/s0qLJ4geZko?autoplay=1&loop=1&playlist=s0qLJ4geZko或this.id：

$(this).attr('id')

$('#pic_pin').on('click', '.pin', function(e){ console.log('log: '+this.id); ... });上下文中的this引用当前点击的click。

Answer 2

我假设.pin函数调用为id元素提供了this属性，因为它们默认没有它们。

假设是这种情况，您需要使用e.currentTarget或e.target，而不是target。

使用委托事件处理程序时#pic_pin是事件冒泡的元素（在您的情况下是this），而currentTarget和$.fn.uniqueId = function() { $(this).prop('id', new Date().getTime()); } $('#selected_picture').on('click', function(e) { offset = $('#selected_picture').offset(); x = e.pageX - offset.left - 25; y = e.pageY - offset.top - 25; var pin = $('<div class="pin"><img class="pin-img" data-left="' + x + '" data-top="' + y + '" src="pin.png" /></div>'); pin.uniqueId(); $('#pic_pin').append(pin); pin.css('left', x).css('top', y).show(); }); $('#pic_pin').on('click', '.pin', function(e) { console.log('log: ' + e.currentTarget.id); });是指元素这引发了这一事件。

试试这个：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="pic_pin">
  <div id="selected_picture">
    <img src="map.png" />
  </div>
</div>

{{1}}

jQuery单击fires但没有传递任何事件

2 个答案: