Question

我正在尝试创建一个图像库，其中有一个图像的拇指，然后当您将鼠标悬停在它上方时，拇指右下角会出现一个红色的X.

如果您单击拇指本身，它将打开一个灯箱库。如果单击红色X图像，则会删除图像。

我现在已经相当好地设置了CSS，无论如何。它将红色X放在图像上的正确位置，我将它设置为20000。

问题是无论我是否点击拇指或灯箱点燃了x。

以下是我们正在关注的内容：

一些JS：

$('#PicturePreview a').lightBox();
$(document).delegate('.delete_img', 'click', function() {
    alert("You dirty rat");
            // I can't get it to get in here....
});

一些CSS：

.delete_img {
left: 0;
position: absolute;
top: 80px;
text-align: right;
width: 150px;
z-index: 2000000;
}
#PicturePreview img {
max-height: 120px;
max-width: 153px;
}

和HTML：

<div id="PicturePreview">
<table>
        <tr>
            <td>
        <div class='preview_image'>
        <a href='../../pic.jpg' alt='' />
                        <img src='../../pic.jpg' alt='' />
            <div class='delete_img'>
                            <img src='assets/common/red_x.png' alt='' />
                        </div>
        </a>
                </div>
    </td>
        </tr>
    </table>
</div>

Answer 1

父主播正在覆盖该事件;尝试将delete_img div移到它之外：

<div class='preview_image'>
    <div class='delete_img'>
        <img src='assets/common/red_x.png' alt='' />
    </div>    
    <a href='../../pic.jpg' alt=''>
        <img src='../../pic.jpg' alt='' />
    </a>
</div>

根据您的CSS，您可能需要将preview_image div设置为position: relative，以使红色x与预览图像保持一致。

Answer 2

该事件正在“冒泡”到您需要使用stopPropagation的父a：

$('.delete_img').click(function(event) {
    alert("You dirty rat");
    event.stopPropagation();

});

这里的文档 - ＆gt; http://api.jquery.com/event.stopPropagation/

jQuery CSS使用javascript事件处理程序将图像放在图像上

2 个答案: