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

Question

I'm making images gallery and I want to show delete icon on image. I made div containter for image and icon with relative position and icon img with position absolute. But jquery .click and .on('click',function(){...}); not working. Here is my code (I'm using 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' );
});

When .delete is set changed another class it works. Why it's not working with this absolute positioned div? When I hover .delete div mouse icon is changing so it's on top.

Answer 1

You have to wait for the DOM to fully load before you attach the event handler. Change your javascript like below

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