javascript - 将 Jquery 应用于动态创建的图像

Question

我是 Javascript/Jquery 和 PHP 的新手，我正在试验它。基本上，我创建了一个简单的图片库，其中每张图片的不透明度为 0.4，直到您将鼠标悬停在它上面并且它变为 100% 不透明度。现在我更进一步，使用 PHP 扫描图像目录并将它们添加到图库中的图片列表中。当前代码如下所示:

$(document).ready(function(){

var i = 0;
var names;

function returndata(files){
    names = files;

    for(i=0; i < names.length ; i++){
        $('<li id="img_' + i + '"><img src="../Gallery_pictures/' + names[i] + '"/></li>').appendTo('#thumbnails ul');
    }       
}

 $.post('../php/read_directory.php',function(data){
    var files = $.parseJSON(data);
    returndata(files);
    });
});

代码有效并将图像添加到网页上的列表中，但我将如何将 Jquery 淡入淡出添加到新创建的图像中？我到处搜索这个问题的答案，但也许我只是错过了答案。这和图像淡入淡出在单独的外部 Javascript 文件中。提前致谢。

*编辑:*好的，所以我根据您的建议让它工作，但现在的问题是脚本只有在最初将鼠标悬停在图像上时才会启动。所有图片都开始完全不透明，直到将鼠标悬停在上面，然后它们都变成 0.4 不透明度。有任何解决这个问题的方法吗？我也会尝试是否可以在 css 中轻松地做到这一点。

*双重编辑:*所以我可以很容易地用 css 做到这一点，它的工作方式就像我想要的那样。谢谢大家的回复。

Answer 1

使用on 为动态添加的内容设置事件

$(document).on("mouseover", "#thumbnails img", function() {
    $(this).css("opacity", 1); 
});

$(document).on("mouseout", "#thumbnails img", function() {
    $(this).css("opacity", 0.4); 
});

如果您使用的是 1.7 之前的 jQuery，则可以使用 delegate。请注意，委托(delegate)首先采用选择器，然后是事件名称。

$(document).delegate("#thumbnails img", "mouseover", function() {
    $(this).css("opacity", 1); 
});

$(document).delegate("#thumbnails img", "mouseout", function() {
    $(this).css("opacity", 0.4); 
});

避免使用 live，因为它已弃用。