Question

我正在制作图片库，我想在图片上显示删除图标。我为图像和图标创建了div包含相对位置和图标img与位置绝对。但是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');
    });
});

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

1 个答案: