事件侦听器未触发/未正确绑定

Question

我一直在用YouTube API制作一个按钮，该按钮在点击时使用jQuery复制视频ID。我不知道为什么，我没有得到任何Javascript错误和几个小时后(实际上在这个问题上工作了2天)，我仍然没有弄清楚为什么eventListener不开火。

eventListener绑定在函数的末尾，当您点击搜索按钮时触发。每次点击搜索按钮或下一页/上一页按钮时，它们会触发makeRequest功能。然而，不知何故，由eventListener触发的函数永远不会触发(函数代码本身不在这个代码包中，但它实际上只是console.log的)。有人能帮忙吗?非常感谢<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);
}

Answer 1

问题是

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

在传递给request.execute的回调函数内部的代码被触发之前执行，所以这些元素还不存在。因此，$('.NCScopiable')不返回任何值。

把这一行移到回调代码的最后一行，你就可以开始了，例如:

    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);
    });