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

알았어, apparantly 나는 충분히 봤어. 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 요소를 페이지에 추가 할 때마다 새 이벤트를 바인딩해야합니다.

live이라는 jquery에 내장 된 함수가 있습니다.

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')); 
}); 

편집은 : 잘못된 문장을 수정.