[英]Implement jQuery on dynamically created elements
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. 我正在尝试将两个jQuery脚本集成到一个脚本中,但是由于第一部分的元素是使用jQuery动态创建的,所以我无法使项目的第二部分正常工作。
The project: 该项目:
1.Instagram pictures are parsed as JSON into li
elements. 1. Instagram图片被解析为JSON到li
元素中。
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>
2.This works fine but when I try to add the slider none of the functions work. 2.这可以正常工作,但是当我尝试添加滑块时,所有功能都不起作用。 Even if I wrap the callout function in a $( document ).ready(function() { });
即使我将标注函数包装在$( document ).ready(function() { });
Here's the call out code: 这是标注代码:
<script>
new ElastiStack( document.getElementById( 'elasticstack' ) );
</script>
Here's the JS Fiddle with all my code: LINK 这是带有我所有代码的JS小提琴: LINK
Where am I going wrong? 我要去哪里错了?
Try to initialize the ElastiStack
after data ( HTML
elements) has been appended into the DOM
in your ajax
, for example: 在将数据( HTML
元素)添加到ajax
的DOM
中后,尝试初始化ElastiStack
,例如:
for (var i = 0; i < count; i++) {
// ...
$("#elasticstack").append(...);
}
new ElastiStack(...);
It should work. 它应该工作。
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. 在初始loadImages(start_url)
调用之后,您应该能够调用loadImages(next_url)
来加载和显示更多内容。 new ElastiStack
had to be called after the images had been appended. 在添加图像之后,必须调用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);
});
$.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'));
您必须移动new ElastiStack(document.getElementById('elasticstack'));
inside the ajax success event. 在ajax成功事件中。 You don't have to change anything else in your. 您无需更改其他任何内容。 I also updated your JSFiddle. 我还更新了您的JSFiddle。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.