javascript - 通过动态添加的img查询text()

我意识到这可能是一个已经回答的问题，但是我想问一下，市场上是否有新东西可以轻松解决我的问题。

我正在使用javascript将图像加载到指定的坐标。

var span = document.createElement("span");
span.innerHTML = "<img src=\"source.gif\" id=\"someid\">";
span.style.position = "absolute";
span.style.left = coodinatesLeft[i] + "px";
span.style.top = coodinatesTop[i] + "px";
document.body.appendChild(span);

稍后，当鼠标移到图像上方时，我想在jquery中使用简单的mouseenter函数

$("mydivid").mouseenter(function(){  $(this).text("something"); });

在图像的位置在那里写文本。我想我什么也没得到，因为图像比文本更前景。有时我使用过它，并且它起作用了，但是后来我只有一个div，并且没有实际的图像源。

有没有办法保留结构并将文本附加到图像上？

PS：我阅读了有关z-index的信息，但不确定是否正是我所需要的，因为我没有图像的预定义CSS类。

提前致谢！

最佳答案

您应将event delegation用于动态添加的元素。

$('<span />')
    .html('<img src="source.gif" class="myImages">')
    .css({
        'position': 'absolute',
        'left': coodinatesLeft[i] + 'px',
        'top': coodinatesTop[i] + 'px'
    })
    .appendTo('body');


$('.myImages').hover(function() {
    $(this).append('<span id="myText">MY TEXT HERE</span>');
}, function() {
    $('#myText').remove();
});

CSS：

#myText {
    height: same as .myImages;
    width: same as .myImages;
    opacity: .5;
    background: #ccc;
}