无法选择由 Javascript 附加的 HTML 元素

Question

我知道这是一个非常普遍的问题，即使我已经多次解决了这样的问题，也有很多这样的问题已经得到了解答，但这次我被困在这一点上。我试图应用许多解决方案，但没有任何效果。

这是我的JS的样子：

jQuery(document).ready(function($){
avHomePageThumbnails();
var slideIndex = 0; showSlides();

function avHomePageThumbnails(){
let homePagePosts = JSON.parse(posts_data);
homePagePosts.map( homePagePost => {
let screenID = homePagePost.query_vars.meta_value;
if(homePagePost.posts.length > 0){
homePagePost.posts.map(( post, i ) => {
let postID = post.ID;
let postURl = post.guid;
$.post(ajax_url, {
action: "av_get_post_data_by_id",
id: postID
}, function(resp){
//console.log(resp, screenID);
resp = JSON.parse(resp);
let data = ''+
'<div class="mySlides fade">'+
'<a href="'+postURl+'">'+
'<img src="'+resp.image+'" style="width:100%">'+
'<div class="text">'+resp.title+'</div>'+
'</a>'+
'</div>';
$(".home-screen-thumb-container #"+screenID).append(data);
});
} );
}
});
//console.log(homePagePosts);
}

function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
//var slides = $(".home-screen-thumb-container").find(".mySlides");
console.log(slides);
for (i = 0; i < slides.length; i++) {
slides[i].style.display="none";  
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}  
slides[slideIndex-1].style.display = "block";  
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
});

在这里，我无法在showSlides()中选择divmySlides

Answer 1

在你调用showSlides()的时候，你的另一个函数avHomePageThumbnails()还没有完成它的(异步(ajax调用。

您的解决方案是从 ajax-call ($.post()( 调用showSlides()它的回调函数(在添加div 的部分之后(。或者(好多了(，让avHomePageThumbnails()返回一个承诺，并在承诺完成后调用showSlides()。

在这里快速介绍承诺： https://developers.google.com/web/fundamentals/primers/promises

Answer 2

ShowSlides(( 必须在附加的数据之后调用，因为该元素不存在。 调用查询结果时未设置查询结果。 这是异步的！