0

我似乎被困在与动态元素创建相关的问题上。jquery ".children" 方法无法识别添加到 DOM 的元素。我想在它们被添加之前隐藏我的数据，推入数组然后为它们设置动画。

我看过 .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 回答
1

由于您使用 ajax 加载子元素，因此您的代码将异步执行，因此您需要使用回调机制来解决此问题，如下所示

$(function() {
    initInstagram(function(feeds, children){
        $(children).hide()
        animateElements(children);
    });
});

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

function initInstagram(callback) {
    $.getJSON('../includes/instagram.php', function(feeds) {
        var children = [];
        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>';
            var el = $(feedHTML).prependTo('#main');               
            children.push(el.get(0))           
        }     
        callback(feeds, children);
    });
}

演示：Plunker

于 2013-05-24T03:07:15.480 回答