无法使用jQuery将链接元素附加到iframe

Question

I'm building a web app to make my business more automated with HTML/CSS/jQuery in the front end and python in the backend .

I wrote an easy script with jQuery that call a route with ajax and recieve the data as json and after that parse it and return a list of iframes depending on it's length : If we have 20 items in that list and we want 5 items per page, create 4 pages and put 5 iframes in each link .

Here's the code responsible for this feature :

        $('.pageContent').empty()
                        for (var i = 0; i < vidPageList.length; i++){
                            var videoUrl = vidPageList[i].videoLink
                            var postUrl = vidPageList[i].postLink
                            console.log(postUrl)
                            $('<iframe src ="'+videoUrl+'" class = "videoEntry" width = "360" height = "250"></iframe>').appendTo( ".pageContent" )
                            $('<a class = "postLink" href = "'+postUrl+'"> Video link </a>').appendTo(".videoEntry")
                        }

The problem:

iframes are added perfectly but the links are not added at all, I don't know why, the console is not showing me any error, I tried to debug the values of postUrl and they are all correct, why is it doing this ? It looks like the last line responsible for adding the link is not working, I also tried to add everything with one appendTo() call but it only added iframes, what I'm missing here ?

Answer 1

The first time your selectors ran, there was no .videoEntry class because it is in the iframe. It may be useful to first make all your html content before appending.