0

動的要素の作成に関連する問題で立ち往生しているようです。DOM に追加された要素が、jquery の「.children」メソッドによって認識されません。データが前に追加される前にデータを非表示にし、配列にプッシュしてからアニメーション化したいと考えています。

.on() メソッドを見てきましたが、動的要素をバインドして認識できるようにする方法がわかりません。助言がありますか？ありがとう！

完全なコードを更新:

$(function() {
   var children = [];
   initInstagram();

   $("#main").children().each(function() {
     console.log(this);
     children.push(this);
   });

animateElements(children);

});

function animateElements(children) {
 if (children.length > 0) {
   var currentChild = children.shift();
   $(currentChild).fadeIn("slow", function() {
     animateElements(children);
   });
 }
}

function initInstagram() {
  $.getJSON('../includes/instagram.php',
  function(feeds) {
    var feedHTML = '';
    var displayCounter = 1;
    for (var i = 0; i < feeds.length; i++) {
      var imgURL = feeds[i].img;
      var caption = feeds[i].caption;         

      feedHTML = '<article class="box">';
      feedHTML += '<img src="'+imgURL+'" alt="'+caption+'" title="'+caption+'" >';
      feedHTML += '<div class="overlay"><h4>'+caption+'</h4></div>';
      feedHTML += '</article>';
      $(feedHTML).prependTo('#main').hide();              
    }        
 });
}
4

2 に答える 2

3

これには、DOMNodeInserted イベントを使用してアプローチします。

var children = [];
$("#main").on('DOMNodeInserted', 'article', function() {
  console.log(this);
  children.push(this);
});

// get instagram data
$.getJSON('../includes/instagram.php',
  function(feeds) {
    var feedHTML = '';
    var displayCounter = 1;
    for (var i = 0; i < feeds.length; i++) {
      var imgURL = feeds[i].img;
      var caption = feeds[i].caption;         

  feedHTML = '<article class="box">';
  feedHTML += '<img src="'+imgURL+'" alt="'+caption+'" title="'+caption+'" >';
  feedHTML += '<div class="overlay"><h4>'+caption+'</h4></div>';
  feedHTML += '</article>';
  $(feedHTML).prependTo('#main');               
}});

または、そのイベントが十分にサポートされていないため、挿入後にトリガーするカスタム イベントを作成します。

var children = [];
$("#main").on('customEvent', 'article', function() {
  console.log(this);
  children.push(this);
});

// get instagram data
$.getJSON('../includes/instagram.php',
  function(feeds) {
    var feedHTML = '';
    var displayCounter = 1;
    for (var i = 0; i < feeds.length; i++) {
      var imgURL = feeds[i].img;
      var caption = feeds[i].caption;         

  feedHTML = '<article class="box">';
  feedHTML += '<img src="'+imgURL+'" alt="'+caption+'" title="'+caption+'" >';
  feedHTML += '<div class="overlay"><h4>'+caption+'</h4></div>';
  feedHTML += '</article>';
  $(feedHTML).prependTo('#main').trigger('customEvent');               
}});
于 2013-05-24T03:02:53.627 に答える