Jquery 동적 요소가 인식되지 않습니다.

Question

동적 요소 생성과 관련된 문제에 봉착 한 것 같습니다. DOM에 추가 된 요소는 jquery ".children"메소드로 인식되지 않습니다. 데이터가 미리 추가되기 전에 숨기고 배열에 넣은 다음 애니메이션을 적용하고 싶습니다.

.on() 메서드를 살펴 봤지만 동적 요소를 바인딩하여 인식 할 수 있도록하는 방법이 확실하지 않습니다. 어떤 제안? 감사!

UPDATE FULL 코드 :

$(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

, 당신은이 문제를 해결하기 위해 콜백 메커니즘을 사용할 필요가

$(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

Answer 2

나는 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');    
}});