绝对定位img，jquery不会对点击事件作出反应

Question

我正在制作图片库，我想在图片上显示删除图标。我制作了div容器，用于图像和带有相对位置的图标，以及带有绝对位置的图标img。但是jquery。单击和。在（'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' );
});

当。删除设置更改另一个类它的工作。为什么它不工作与这个绝对定位div？当我悬停时。删除div鼠标图标正在改变，所以它在上面。




Answer 1

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

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