javascript - 为什么 jQuery keyup 重复触发？

Question

我希望用户通过按 ENTER 键进行搜索。

出于某种原因，当我多次使用回车键进行搜索时，我的程序开始重复调用 YouTube API，即 2 组相同的 5 个视频。如果您再次点击 ENTER，它现在会返回 3 组 5 个视频...等等。

这是我允许 ENTER 键的方式:

//allow them start search by hitting enter key:
$("#youtube-headerContainer-searchBox").focus(function() {
    $(this).keyup(function(e) {
        if(e.which == 13) {
            startIndex=1;
            fetchVideos();
            console.log('enter key pressed');
        }
    });
});

我做了一个 fiddle ，所以你可以测试它:http://jsfiddle.net/Vna3Z/1/ 只需输入搜索内容，然后按 ENTER，然后再次按 ENTER。你会明白我的意思。

有人知道为什么吗？

Answer 1

因为您一次又一次地附加相同的事件处理程序。

每次搜索框获得焦点(因此您的 .focus() 处理程序运行)，这意味着多了一个事件处理程序，因为 .keyup() 用于附加一个keyup 事件元素上的事件处理程序 - 每次调用它时，都会附加一个!

我不知道你为什么需要 .focus() 处理程序，你可以简单地做

$("#youtube-headerContainer-searchBox").keyup(function(e) {
    if(e.which == 13) {
        startIndex=1;
        fetchVideos();
        console.log('enter key pressed');
    }
});

或阅读 .off() .