Problem with Javascript and YouTube API. Help is much appreciated!

[infinitigamesuk]

Firstly apologies for my limited knowledge of javascript, I've only been using it for a couple of days so this may be an extremely straight forward issue which I'm missing.

 

Nonetheless, I'm trying to make a YouTube video selector which will play the 6 most recent videos uploaded to a playlist when the appropriate thumbnail is clicked. Both parts of the javascript for this work seperatley: I have a working video selector (http://infiniti-games.co.uk/workingSelector.htm), and a working script which grabs the recent thumbnails and video IDs, and then places them into the body of the page (http://infiniti-games.co.uk/getData.htm).

 

However when I make the script push the URLs into the body of the page (like in the second linked above), the selector no longer works, despite the fact that when inspecting the code, it is identical to the code of that in the working selector.

 

 

Javascript for video selector:

        $(document).ready(function(){
            $(".thumbnail").click(function() {
            $("#playvideo").html(play(  $(this).find("a").attr("linkattr")));           
            return false; 
            });
        });
    function play(id)   {
           var html  = '';     
           html += '<iframe width="671" height="495" src="'+id+'" frameborder="0" allowfullscreen></iframe>';
           return html;
        };

Javascript for grabbing recent uploads and thumbnails:

        $.getJSON("https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=6&playlistId=PLBGzLPMsBXKZT8NVoYjAbPgB04ReJBdn5&key=AIzaSyC0vSzN0Cmm4cXPXfKD427jFc8MNkl52V4", function(data) {
      var items = [];
 
      data.items.forEach((item) => {
        var vidId = item.snippet.resourceId.videoId;
        var thumb = item.snippet.thumbnails.medium.url;
        console.log(vidId, thumb);
 
        items.push(vidId, thumb);
 
        $('#thumbContainer').append(`
        <div class="thumbnail">
            <a linkattr="https://www.youtube.com/embed/${vidId}?list=PLBGzLPMsBXKZT8NVoYjAbPgB04ReJBdn5&autoplay=1" href="#"><img src="${thumb}"></a>
        </div>
        `)
      })
    });

The rest of the code can obviously be found on the pages I listed above.

Any help is much appreciated, thanks!!! 

[Mr_KoKa]

What is happening is

 

1. site loads

2. it runs your script

3. your script sets ready callback to bind click event on all .thumbnail

4. your script runs AJAX

5. page finishes loading -> ready callback kicks in and sets click for all .thumbnail (there are no thumbnail yet)

6.  AJAX finishes and callback is creating .thumbnails

 

Even if ajax would end before ready callback there is possibility that there won't be #thumbContainer yet.

What I would do is move all from ready callback to the end of getJSON callback and move whole script to the bottom of body (under #thumbContainer) then you will be sure all will run when all required DOM elements exists.

 

P.S.: Firefox's debugger has ability to show events attached to DOM element. You would see that your working version have event attached to it and the version that doesn't work does not have any events. That would direct you that something is wrong with ready callback that is setting the event.

[infinitigamesuk]

This seems to have solved the problem, Thanks!