eventListener 没有触发/没有正确绑定

Question

我一直在使用 YouTube API 制作一个按钮，使用 jQuery 在点击时复制视频 ID。我不知道为什么，我没有收到任何 Javascript 错误，并且在几个小时后（实际上已经解决了这个问题 2 天），我仍然没有弄清楚为什么 eventListener 没有触发。

eventListener 绑定在函数的末尾，当您点击搜索按钮时会触发该函数。每次单击搜索按钮或下一页/上一页按钮时，它们都会触发 makeRequest 函数。但是，不知何故，eventListener 触发的函数永远不会触发（函数代码本身并不在这个代码包中，但它实际上只是 console.log 的）。任何人都可以帮忙吗？将不胜感激

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