JQuery，AJAX，PHP，XML;影像合成脚本停止工作的回调内容

Question

点击一个按钮触发我的函数，通过AJAX调用获取图像数据：

$("#toggle_album").click(function() { 
    album_id = $("#album_id").val(); 
       $.post('backend/load_album_thumbnails.php', { 
       id: album_id 
    }, function(xml) { 
    var status = $(xml).find("status").text(); 
     var timestamp = $(xml).find("time").text(); 
    $("#album_thumbs_data_"+album_id+"").empty(); 
    if (status == 1) { 
    var temp = ''; 
    var output = ''; 
    $(xml).find("image").each(function(){ 
     var url = $(this).find("url").text(); 
     temp = "<DIV ID=\"thumbnail_image\"><A HREF=\"javascript:void(null);\" CLASS=\"overlay\">[img-tag with class="faded" goes here]</A></DIV>"; 
     output += temp; 
    }); 
    $("#album_thumbs_data_"+album_id+"").append(output); 
    } else { 
    var reason = $(xml).find("reason").text(); 
    var output = "<DIV CLASS=\"bread\">"+reason+"</DIV>"; 
    $("#album_thumbs_data_"+album_id+"").append(output); 
    } 
    $("#album_thumbs_"+album_id+"").toggle(); 
    }); 
    }); 

的数据以XML格式返回，并将其解析好，数据附加到一个空的容器并显示它;

我的问题是，我的图像叠加脚本：

$("img.faded").hover( 
    function() { 
    $(this).animate({"opacity": "1"}, "fast"); 
    }, 
    function() { 
    $(this).animate({"opacity": ".5"}, "fast"); 
    }); 

...停止工作，我通过AJAX调用获取的图像数据。它适用于所有其他通过“正常”方式加载的图像。脚本是否需要以某种方式进行调整以处理稍后添加的数据？

我希望我的问题很清楚。

Answer 1

好的，看起来我没有足够的搜索它。在stackoverflow上对我自己的问题进行浏览时指出了其他问题，这些问题将我引向JQuery live（）函数：live()。

然而，这并不悬停（）工作，所以我改写脚本中使用鼠标悬停（）和鼠标移出（）代替：

$("img.faded").live("mouseover",function() { 
     $(this).animate({"opacity": "1"}, "fast"); 
    }); 
    $("img.faded").live("mouseout", function() { 
     $(this).animate({"opacity": "0.5"}, "fast"); 
    }); 

...现在它完美的作品甚至在内容我从AJAX调用中获取。

对不起，如果有人已经开始写答案了。

Answer 2

每次向页面添加DOM元素时，都必须绑定新事件。

在jquery中有一个内置的函数，叫做live，它可以帮助你。

我注意到你从你的xml中添加图像;你可以在那里添加新的绑定。

$(xml).find("image").each(function(){ 
    //this actually creates a jquery element that you can work with 
    $('my-img-code-from-xml-goes-here').hover( 
     function() { 
     $(this).animate({"opacity": "1"}, "fast"); 
     }, 
     function() { 
     $(this).animate({"opacity": ".5"}, "fast"); 
     } 
     //i did all my dirty stuff with it, let's add it where it belongs! 
    ).appendTo($('some-already-created-element')); 
}); 

编辑：纠正一个错误的判决。