Question

我一直在使用YouTube API来制作一个按钮，使用jQuery点击视频ID。我不知道为什么，我没有得到任何javascript错误和下班后（实际上已经解决了这个问题2天），我仍然没有弄清楚为什么eventListener不会触发。 eventListener绑定在函数的末尾，当您点击搜索按钮时会触发该函数。每次单击搜索按钮或下一页/上一页按钮时，它们都会触发makeRequest函数。但不知何故，eventListener触发的函数永远不会触发（函数代码不在此代码本身，但它实际上只是console.log的）。有人可以帮忙吗？非常感谢＆lt; 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不会触发/无法正确绑定

1 个答案: