eventListener 没有 fire/doesn 没有正确绑定

Question

我一直在与 YouTube API 打交道来制作一个按钮，使用 jQuery 在点击时复制视频 ID。我不知道为什么，我没有收到任何 Javascript 错误，下班后（实际上已经处理这个问题 2 天），我仍然没有弄清楚为什么 eventListener 没有t火。

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

eventListener 没有 fire/doesn 没有正确绑定

eventListener doesn't fire/doesn't bind properly

javascript

jquery

youtube-api

mouseclick-event

jquery-events