동적으로 생성 된 요소에 jQuery 구현

Question

두 개의 jQuery 스크립트를 하나로 통합하려고하지만 첫 번째 요소의 요소가 jQuery를 사용하여 동적으로 만들어지기 때문에 프로젝트의 두 번째 부분을 사용할 수 없습니다.

프로젝트 :

1.Instagram 사진은 li 요소로 JSON로 구문 분석됩니다.

다음은 코드의 일부입니다 :

<ul id="elasticstack" class="elasticstack"> 
</ul> 

<script> 
$("#elasticstack").append("<li><div class='peri-pic'><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /><span class='name'>"+ data.data[i].caption.from.username +"</span> <span class='likes'><span class='glyphicon glyphicon-heart'></span><p>"+data.data[i].likes.count +"</p></span></div></li>" 
    ); 
</script> 

출처 : LINK

2.이 잘 작동하지만 기능 작업의 슬라이더 전혀 추가하지하려고 할 때. 나는 $(document).ready(function() { });

에 콜 아웃 기능을 포장해도 여기에 콜 아웃 코드는 다음과 같습니다

<script> 
    new ElastiStack(document.getElementById('elasticstack')); 
</script> 

출처 : LINK

여기

내 모든 코드를 사용하여 JS 바이올린의 : LINK

오전 내가 잘못 가고있어?

Answer 1

찾고 계신가요? loadImages(start_url) 전화가 오면 loadImages(next_url)으로 전화하여 더 많은 정보를 표시하고 더 많이 표시 할 수 있습니다. new ElastiStack 이미지를 첨부 한 후에 호출해야했습니다.

var access_token = "18360510.5b9e1e6.de870cc4d5344ffeaae178542029e98b", 
    user_id = "18360510", //userid 
    start_url = "https://api.instagram.com/v1/users/"+user_id+"/media/recent/?access_token="+access_token, 
    next_url; 

function loadImages(url){ 
    $.ajax({ 
     type: "GET", 
     dataType: "jsonp", 
     cache: false, 
     url: url, 
     success: function(data){ 
      displayImages(data); 
      next_url = data.pagination.next_url; 
     } 
    }) 
} 

function displayImages(images){ 
    for(var i = 0; i < 20; i++){ 
     if(images.data[i]){ 
      $("#elasticstack").append("<li><img class='instagram-image' src='" + images.data[i].images.low_resolution.url + "'></li>"); 
     } 
    } 

    // Call it after the images have been appended 
    new ElastiStack(document.getElementById('elasticstack')); 
} 

$(document).ready(function(){ 
    loadImages(start_url); 
}); 

Answer 2

데이터 (HTML 요소) 당신의 ajax에 DOM에 추가 된 후 예를 들어, ElastiStack를 초기화하십시오 :

for (var i = 0; i < count; i++) { 
    // ... 
    $("#elasticstack").append(...); 
} 

new ElastiStack(...); 

그것은 작동합니다.

Answer 3

 $.ajax({ 
      type: "GET", 
      dataType: "jsonp", 
      cache: false, 
      url: url , 
      success: function(data) { 

      next_url = data.pagination.next_url; 
      //count = data.data.length; 
      //three rows of four 
      count = 20; 

      //uncommment to see da codez 
      //console.log("count: " + count); 
      //console.log("next_url: " + next_url); 
      //console.log("data: " + JSON.stringify(data)); 

      for (var i = 0; i < count; i++) { 
        if (typeof data.data[i] !== 'undefined') { 
        //console.log("id: " + data.data[i].id); 
         $("#elasticstack").append("<li><img class='instagram-image' src='" + data.data[i].images.low_resolution.url +"' /></li>" 
        ); 
        } 
      }  
      new ElastiStack(document.getElementById('elasticstack')); 
     } 
    }); 

당신은 아약스 성공 이벤트 내부에 new ElastiStack(document.getElementById('elasticstack'));를 이동해야합니다. 당신은 당신의 다른 것을 바꿀 필요가 없습니다. JSFiddle도 업데이트했습니다.