为什么jQuery keyup会重复？

Question

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

出于某种原因,当我多次使用回车键搜索时,我的程序开始重复调用youtubeAPI,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');
        }
    });
});

我做了一个小提琴,所以你可以测试它:http://jsfiddle.net/Vna3Z/1/ 只需输入一个搜索,然后按回车键.然后再次按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().