jQueryで新しい要素をハンドルに追加

Question

ページには記事のリストがあります。 "詳細"ボタンをクリックすると、より多くの記事がAJAX経由で読み込まれます

新しく追加された記事をスムーズに表示する必要があります。

私はjQuery.fadeIn（）メソッドで実行できます。

問題は、問題のjQuery要素に新しい要素が追加されたときに、そのようなイベントを処理する方法です。

私はサーバーでカスタムJavaScriptメソッドを呼び出したくありません。サーバー側は、どのスタイリング機能についても弱くなければなりません。

したがって、コードはサーバー側できれいでなければなりません。jQuery.append（）メソッドを使用して新しい要素を追加するだけで済みます。

クライアント側では、それは次のようにする必要があります：

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

は、法の一種である「elementAdded」、私が探しています。

どうすればよいですか？

-

ありがとうございます。

Answer 1

elementAddedイベントについては、dommodifiedというイベント、IMOと呼ばれることがあります。これらはJavascriptには存在しませんが、jQueryはそれらを模倣する必要があります。これは理論的に行うのは難しいことではありません：あなたは、その後contentappendedイベントに結合することによって、append()と修正を取り込むことができ

(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); 

：

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

Answer 2

サーバーがappendを呼び出さないため、すべてのjavascriptがクライアント上で実行されます。新しい要素を追加するところでjQuery.fadeIn（）を呼び出してください。