jQuery

Question

ile yeni öğenin tanıtıcılarının eklenmesiyle ilgili makalelerin bir listesi vardır. "Daha fazla" tuşunu tıkladığınızda, daha fazla makale AJAX

ile yüklenecektir. Yeni eklenen makalelerin sorunsuz olarak görünmesi gerekiyor.

jQuery.fadeIn() yöntemiyle yapabilirim.

Sorun, söz konusu jQuery öğesine yeni öğeler eklendiğinde bu olayın nasıl ele alınacağıdır.

Sunucuda özel JavaScript yöntemini aramak istemiyorum. Sunucu tarafı, herhangi bir stil özelliği hakkında zayıf olmalıdır. Bu nedenle, sunucu tarafında kodun temiz olması gerekir - jQuery.append() yöntemini kullanarak yeni öğeler eklemeniz gerekir. istemci tarafında

, bu böyle olmalı:

$("#articles").elementAdded(function(newElem){ 
    newElem.hide(); 
    newElem.fadeIn(600); 
}); 

"elementAdded" yönteminin bir türüdür i arıyorum.

Nasıl yapmalı?

- önceden

teşekkürler.

Answer 1

Sorunuz, daha iyi bir dommodified olayı, IMO olarak adlandırılacak olan bir elementAdded olay hakkındadır. JQuery'nin bunları taklit etmesi gerektiğini düşünmelerine rağmen bunlar Javascript'te yok.

Ardından contentappended olaya bağlanarak append() değişikliklerinden yakalayabilecek

(function($, undefined) { 
    var _append = $.fn.append; 

    $.fn.append = function(newHtml) { 
     return this.each(function(i, el){ 
      var $el = $(el); 
      _append.call($el, newHtml); 
      $el.trigger('contentappended'); 
     }); 
    }; 
})(jQuery); 

: Bu teoride yapmak zor değildir

$('#articles').bind('contentappended', function() { 
    $(this).hide().fadeIn(600); 
}); 

Answer 2

Sunucu ekleme yapmıyor, tüm javascript istemcilerde yürütülür. Yeni öğeleri eklediğiniz noktada jQuery.fadeIn() öğesini çağırın.