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

わかりました、どうやら私はそれを十分にグーグルで検索していませんでした。ここでスタックオーバーフローで自分の質問をサーフィンすると、他の質問が表示され、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 に答える