0

单击按钮会触发我的函数，该函数通过 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 调用获取的图像数据。它适用于已通过“正常”方式加载的所有其他图像。是否需要以某种方式调整脚本以处理稍后添加的数据？

我希望我的问题足够清楚。

4

2 回答 2

2

好吧，显然我在谷歌上搜索得还不够。在 stackoverflow 上浏览我自己的问题向我指出了其他问题，这些问题将我指向了 JQuery live() 函数：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 调用中获取的内容上，它也能完美运行。

抱歉，如果有人已经开始写答案。

于 2009-11-18T13:30:09.753 回答
1

每次向页面添加 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'));
});

编辑：更正了一个错误的句子。

于 2009-11-18T13:29:22.850 回答