eventListener doesn't fire/doesn't bind properly

Question

I've been messing around with YouTube API to make a button that copies the video ID on click using jQuery. I have no idea why, I don't get any Javascript errors and after hours (actually been working on this problem for 2 days), I still haven't figured out why does the eventListener doesn't fire.

The eventListener is bound at the end of the function, which is fired when you hit a search button. Each time you click on the search button or on the next page/ previous page buttons, they fire the makeRequest function. Somehow, though, the function triggered by the eventListener never fires (the function code isn't in this parcel of code itself, but it's actually just console.log's). Can anyone help? Would be really appreciated <3

function makeRequest(e) {
 $('#search-container')[0].innerHTML = '';
 ytSearchResults = [];
        var q = $('#query').val();
        var request = gapi.client.youtube.search.list({
                   q: q,
                part: 'snippet',
                maxResults: 15,
                pageToken: ytPage,
                type: 'video',
                safeSearch: 'none',
                videoSyndicated: 'true'
        });
        request.execute(function(response) {
                var str = response.result;
                ytNextPage = str.nextPageToken;
                ytPrevPage = str.prevPageToken;
                for(i=0;i<str.items.length;i++){
                  $('#search-container')[0].innerHTML += '<br><a href="https:youtube.com/watch?v=' + str.items[i].id.videoId + '" target="_blank"><image src='+str.items[i].snippet.thumbnails.default.url+'></image></a><br><button id="'+str.items[i].id.videoId+'" class="NCScopiable">'+str.items[i].snippet.title+'</button>';
                  ytSearchResults.push(str.items[i].id.videoId);
                }
                
                $('#search-container')[0].innerHTML += '<br><div id="button-changePage"><span id="button-prevPage" style="color:blue;cursor:pointer;margin:5px"><u>Previous Page</u></span><span id="button-nextPage" style="color:blue;cursor:pointer;margin:5px"><u>Next Page</u></span>';
                if(e&&ytCurPage>0){
                  $('#button-prevPage')[0].style.display = 'block';
                  $('#button-nextPage')[0].style.display = 'block';
                } else {
                  ytCurPage = 0;
                  $('#button-prevPage')[0].style.display = 'none';
                }
                $('#button-prevPage').on('click',function(){ytCurPage-=1;ytPage=ytPrevPage;makeRequest(true);});
                $('#button-nextPage').on('click',function(){ytCurPage+=1;ytPage=ytNextPage;makeRequest(true);});
                console.log('Current ytCurPage value: '+ytCurPage);
        });
        $('.NCScopiable').on('click',cTWI);
}

barry-johnson · Accepted Answer · 2015-10-18T18:11:43.510

1

The problem is that the line

$('.NCScopiable').on('click',cTWI);

Is being executed before the code inside the callback passed to request.execute has fired, so those elements don't exist yet. Thus $('.NCScopiable') is returning nothing.

Move that line into the last line of your callback code and you should be good to go, for example:

    request.execute(function(response) {
            var str = response.result;
            ytNextPage = str.nextPageToken;
            ytPrevPage = str.prevPageToken;

            // ...code removed for brevity...
            // this was the code that is actually creating the elements with
            // the NCScopiable class

            console.log('Current ytCurPage value: '+ytCurPage);
            $('.NCScopiable').on('click',cTWI);
    });

edited Oct 18 '15 at 18:11

answered Oct 18 '15 at 18:05

barry-johnson

3,204
1
17
19

Worked, idk how but. Thanks! – Nuvm Oct 18 '15 at 18:54
1

@Nuvm - You are very welcome. You may want to reread my answer, as it states quite plainly why the original did not work and why the changed version does. Also, it is customary to accept the answer if it answers your question and solves the problem. Thanks! – barry-johnson Oct 18 '15 at 19:58

eventListener doesn't fire/doesn't bind properly

1 Answers1