Note that there are some explanatory texts on larger screens.

plurals
  1. POJQuery, AJAX, PHP, XML; Image overlay script stops working on callback content
    text
    copied!<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>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload