Реализовать jQuery для динамически создаваемых элементов

Question

Я пытаюсь интегрировать два сценария jQuery в один, но поскольку элементы первой части динамически создаются с использованием jQuery, я не могу получить вторую часть работающего проекта.

Проект:

1.Instagram фотографии обрабатываются в формате JSON в li элементов.

Вот часть кода:

<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 Fiddle со всем моим кодом: 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

Попробуйте инициализировать ElastiStack после данных (HTML элементы) были приложены в DOM в вашем ajax, например:

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.