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

Question

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

这些图像是混合图像。

我想在图像的 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 标签 - 以 'img' 开头。
• $(this).next() 仅查找当前 <img> 的下一个元素/子元素。

如果 ID 选择器很重要，

您必须在每次追加时显式调用bind() 事件。