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

我不熟悉Javascript/Jquery和PHP，正在尝试使用它。基本上，我已经创建了一个简单的图像库，其中每张图片的不透明度为.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);
    });
});

$（文档）.ready（函数（）{
var i=0；
变量名称；
函数返回数据（文件）{
名称=文件；
对于（i=0；i）。附加到（'u缩略图ul'）；
}       
}
$.post（'../php/read_directory.php'，函数（数据）{
var files=$.parseJSON（数据）；
返回数据（文件）；
});
});

代码可以工作并将图像添加到网页上的列表中，但是如何将Jquery淡入新创建的图像中呢？我已经到处寻找答案，但也许我只是错过了答案。这和图像淡入淡出在单独的外部Javascript文件中。提前谢谢

*编辑：*好的，所以我使用您的建议让它工作，但现在的问题是，在图像最初被鼠标移到上方之前，脚本不会启动。所有图片开始完全不透明度，直到鼠标移到上面，然后它们都变成.4不透明度。有办法解决这个问题吗？如果我能在css中轻松地做到这一点，我也会尝试

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

尝试将

class=“hoverImg”

添加到您的

img

中，然后执行以下操作：

$('.hoverImg').on('hover',function(){
       // here goes your hover code
});

所以每个图像都有类。hoverImg也有新的。然后将事件悬停绑定到具有类

.hoverImg

的每个图像上。为什么必须使用

.on（）

，因为这样可以确保在完全加载img后将其添加到dom中时也会执行代码。

使用或将事件绑定到动态添加的元素。

---

jQuery 1.7中不推荐使用

.live（）

使用

on

在动态添加的内容上设置事件

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

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

如果您使用的是jQuery 1.7之前的版本，那么您可以使用

委托

。请注意，委托首先使用选择器，然后是事件名称

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

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

---

避免使用

live

，因为它已被弃用

好的，所以我补充说，在你回复之后，它们就在单独的javascript文件中。我应该在你给我的文件中使用$.getScript调用，还是只取外部文件中的内容并将其放入其中？我建议你将代码放入.js文件中，然后简单地将.js文件添加到头部或身体部分，就像这样：你能举一个例子说明如何使用自定义函数/插件吗。我面临的主要问题是，它还希望将一些值传递给hoverpulse在选择器上调用它时返回的函数<代码>$（文档）.ready（函数（）{$（'div.thumb img'）.hoverpulse（{size:40，speed:400}）；}）如何通过on（）传递此类函数的选项？