JQuery, AJAX, PHP, XML;

2 Cevap php

Bir düğme tıklama AJAX çağrısı ile görüntü verilerini getirir benim fonksiyonunu patlar:

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

Verileri XML biçiminde döndü, ve boş bir konteyner için veri ekleme ve bunu gösteren, iyi ayrıştırır edilir;

Benim sorunum, benim görüntü bindirmesi script:

  $("img.faded").hover(   
  function() {   
   $(this).animate({"opacity": "1"}, "fast");
  },   
  function() {   
   $(this).animate({"opacity": ".5"}, "fast");   
  });

... Ben AJAX-çağrı yoluyla almak görüntü verileri üzerinde durur. Zaten "normal" yollarla yüklenen diğer tüm görüntüler üzerinde de çalışıyor. Script sonradan eklenen veriler üzerinde çalışmak için bir şekilde ayarlanması gerekiyor mu?

Benim soru yeterince açıktır umarım.

2 Cevap

Tamam, anlaşılan bunu yeterince Google'da etmemişti. StackOverflow benim kendi soru Sörf canlı jQuery () işlevi beni işaret diğer sorulara, beni işaret etti: live().

Ancak, hover () çalışmıyor, bu yüzden yerine mouseover () ve mouseout () kullanmak için komut dosyasını yeniden yazdı:

	$("img.faded").live("mouseover",function() {
		$(this).animate({"opacity": "1"}, "fast");
	});
	$("img.faded").live("mouseout", function() {
		$(this).animate({"opacity": "0.5"}, "fast");
	});

... Ve şimdi bile ben AJAX-çağrısından getirme içeriği sorunsuz çalışır.

Maalesef herkes zaten bir cevap yazmaya başlamış ise.

Sen yeni olaylar sizin sayfaya bir DOM öğesi eklemek her zaman bağlamak zorunda.

Denilen jquery yerleşik bir işlevi vardır live bunu yapmaz senin için.

Ben size xml gelen görüntüleri eklemek fark ettim; Orada yeni bağlar da ekleyebilirsiniz.

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

EDIT: Yanlış bir cümle düzeltildi.

etiketler