Question

我在div中有多个图像（动态创建），我正在为每个图像应用mouseenter和mouseleave事件，但它不起作用。

这些图像是混合图像。

我想在图像的鼠标中心上显示图像上的十字按钮，并在鼠标左键上隐藏十字按钮。

以下是我的代码：

像这样创建动态html并将其附加到div：

<img src='images/box_bg.png' id='img"+finaldivId+"'/><ImageButton id='close" +   finaldivId + "'>Delete</ImageButton>

图像混合代码：

var id = "img" + finaldivId;
$('.ss-dragged-child img').blend({ id : id, mode: 'overlay', adjustment: 'rgb(' + colorArr.r + ',' + colorArr.g + ',' + colorArr.b + ')'});

此外，我已经从blend.js返回了img而不是canvas，并在img。

中添加了附加的id

以下是img上无法正常工作的mouseenter和mouseleave事件：

$('#img' + finaldivId).bind('mouseenter', function() {
     $("#close" + finaldivId).css({"display" : "block"});
});
$('#img' + finaldivId).bind('mouseleave', function() {
     $("#close" + finaldivId).css({"display" : "none"});
});

请建议我解决方案。

Answer 1

使用委派 on() 来动态添加html。

Demo Fiddle

$(document).on('mouseenter','img[id^="img"]', function() {
     $(this).next().css({"display" : "block"});
});
$(document).on('mouseleave','img[id^="img"]', function() {
     $(this).next().css({"display" : "none"});
});

img[id^="img"]检查带有ID的img标签 - 从＆＃39; img＆＃39;开始。
$(this).next()只查找当前<img>。

如果ID选择器很重要，

每次追加时都必须明确调用bind()事件。

mouseenter和mouseleave事件不适用于混合的图像

1 个答案: