绝对定位的img，jquery对点击事件没有反应

Question

我正在制作图片库，我想在图片上显示删除图标。我为具有相对位置的图像和图标以及具有绝对位置的图标 img 制作了 div 容器。但是 jquery .click 和 .on('click',function(){...}); 不起作用。这是我的代码（我使用的是 blueimp-gallery）：

HTML：

<div class="image">
    <img class="delete" src="/img/delete1.png" value="68">
    <a href="/images/018ce3de8.jpg" title="" data-gallery="">
        <img src="/images/thumbs/018ce3de8.jpg" alt="">
    </a>
</div>

CSS：

.image {
    width: 250px;
    height: 250px;
    display: inline-block;
    position: relative;
}

.delete {
    height: 16px!important;
    width: 16px!important;
    top: 10px;
    left: 224px;
    position: absolute;
}

JQuery:

$('.delete').click( function() {
    alert( 'click' );
});

当设置.delete 时，它会更改另一个类。为什么它不适用于这个绝对定位的 div？当我将鼠标悬停在.delete div 鼠标图标正在改变，所以它在顶部。

Answer 1

在附加事件处理程序之前，您必须等待 DOM 完全加载。 如下更改您的 javascript

$(document).ready(function() {
    $('.delete').click(function() {
        alert('clicked');
    });
});