Question

我是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);
    });
});

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

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

* DOUBLE EDIT： *所以我可以用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); 
});

如果您使用的是jQuery pre 1.7，那么您可以使用delegate。请注意，委托首先采用选择器，然后采用事件名称。

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

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

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

Answer 2

尝试将class="hoverImg"添加到img，然后执行以下操作：

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

所以每个图像都有类.hoverImg也是新的。并且您将事件悬停在具有类.hoverImg的每个图像上。为什么你必须使用.on()只是因为这样可以确保在完全加载后将img添加到你的dom中时也会执行代码。

Answer 3

使用.live()或.on()将事件绑定到动态添加的元素 jQuery 1.7中不推荐使用.live()

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

3 个答案: