title: JQuery, AJAX, PHP, XML; Image overlay script stops working on callback content
body: <p>A button click fires my function that fetches image data via an AJAX-call:</p>
  
  <pre><code>$("#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 = "&lt;DIV ID=\"thumbnail_image\"&gt;&lt;A HREF=\"javascript:void(null);\" CLASS=\"overlay\"&gt;[img-tag with class="faded" goes here]&lt;/A&gt;&lt;/DIV&gt;";
        output += temp;
       });
       $("#album_thumbs_data_"+album_id+"").append(output);
      } else {
       var reason = $(xml).find("reason").text();
       var output = "&lt;DIV CLASS=\"bread\"&gt;"+reason+"&lt;/DIV&gt;";
       $("#album_thumbs_data_"+album_id+"").append(output);
      }
      $("#album_thumbs_"+album_id+"").toggle();
     });
    });
  </code></pre>
  
  <p>The data is returned in XML format, and it parses well, appending the data to an empty container and showing it;</p>
  
  <p>My problem is that my image overlay script:</p>
  
  <pre><code>  $("img.faded").hover(   
    function() {   
     $(this).animate({"opacity": "1"}, "fast");
    },   
    function() {   
     $(this).animate({"opacity": ".5"}, "fast");   
    }); 
  </code></pre>
  
  <p>... stops working on the image data that I fetch via the AJAX-call. It works well on all other images already loaded by "normal" means. Does the script need to be adjusted in some way to work on data added later?</p>
  
  <p>I hope my question is clear enough.</p>