Implement jQuery on dynamically created elements

Question

I'm trying to integrate two jQuery scripts into one but because the elements of the first part are created dynamically using jQuery I can't get the second part of the project working.

The project:

1.Instagram pictures are parsed as JSON into li elements.

Here's a portion of the code:

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

Source: LINK

2.This works fine but when I try to add the slider none of the functions work. Even if I wrap the callout function in a $( document ).ready(function() { });

Here's the call out code:

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

Source: LINK

Here's the JS Fiddle with all my code: LINK

Where am I going wrong?

• Evan Davis: Don't create the ElastiStack until the images have been appended to the DOM.
• babusi: @Mathletics how do I do that?
• bksi: Hm. I don't think it is good idea mixing pure js with jQuery
• babusi: @bksi that's a very good point. I imagined there'd be some sort of conflict. I've never mixed them before.
• bksi: did you try to use $("#elasticstack") instead document.getElementById...?

Answer 1

You're looking for this. After the initial loadImages(start_url) call, you should be able to call loadImages(next_url) to load and display more. new ElastiStack had to be called after the images had been appended.

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

Try to initialize the ElastiStack after data (HTML elements) has been appended into the DOM in your ajax, for example:

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

It should work.

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

You have to move your new ElastiStack(document.getElementById('elasticstack')); inside the ajax success event. You don't have to change anything else in your. I also updated your JSFiddle.