将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);
});
});代码工作并将图像添加到网页上的列表中，但是如何将Jquery淡出添加到新创建的图像中呢？我到处寻找答案，但也许我只是错过了答案。这和图像淡出是在单独的外部Javascript文件。提前谢谢。
编辑：*好的，所以我使用您的建议让它工作，但现在的问题是，脚本是不会启动的，直到一个图像最初被鼠标覆盖。所有的图片开始完全不透明，直到鼠标通过，然后他们都成为.4不透明。有办法解决这个问题吗？如果我能在css中轻松地做到这一点的话，我也会尝试一下。
*双编辑：*这样我就可以很容易地用css来完成这个任务，并且它的工作方式与我想要的一样。谢谢大家的回复。
回答 3
Stack Overflow用户
发布于 2011-12-23 07:51:56
使用on在动态添加的内容上设置事件
$(document).on("mouseover", "#thumbnails img", function() {
$(this).css("opacity", 1);
});
$(document).on("mouseout", "#thumbnails img", function() {
$(this).css("opacity", 0.4);
});如果您使用的是jQuery Pre1.7，那么您可以使用delegate。注意，委托首先接受选择器，然后是事件名。
$(document).delegate("#thumbnails img", "mouseover", function() {
$(this).css("opacity", 1);
});
$(document).delegate("#thumbnails img", "mouseout", function() {
$(this).css("opacity", 0.4);
});避免使用live，因为它是不推荐的。
Stack Overflow用户
发布于 2011-12-23 07:48:08
尝试将class="hoverImg"添加到img中，然后执行以下操作：
$('.hoverImg').on('hover',function(){
// here goes your hover code
});所以每个图像都有.hoverImg类，也有新的。并将事件悬停绑定到具有类.hoverImg的每个图像上。为什么您必须使用.on()，因为这可以确保如果img的代码在完全加载后添加到您的dom中，那么代码也会被执行。
Stack Overflow用户
发布于 2011-12-23 07:50:47
使用.live()或.on()将事件绑定到动态添加的元素。
.live()在jQuery 1.7中被废弃
https://stackoverflow.com/questions/8613468
复制相似问题
腾讯云开发者
