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 указало мне на другие вопросы, которые указали мне на функцию live JQuery: live () .

Тем не менее, он не работает с hover (), поэтому я переписал скрипт, чтобы вместо него использовать mouseover () и mouseout ():

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

РЕДАКТИРОВАТЬ : исправлено неправильное предложение.