在動態創建的元素上實現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小提琴： LINK

我要去哪里錯了？

Answer 1

在將數據（ HTML元素）添加到ajax的DOM中后，嘗試初始化ElastiStack ，例如：

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

new ElastiStack(...);

它應該工作。

Answer 2

您正在尋找。 在初始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 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')); 在ajax成功事件中。 您無需更改其他任何內容。 我還更新了您的JSFiddle。