Question

我似乎陷入了与动态元素创建相关的问题。添加到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();              
    }        
 });
}

Answer 1

我会通过使用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');               
}});

Answer 2

由于您使用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

Jquery动态元素无法识别

2 个答案: