Почему дубликат jQuery дублирует огонь?

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

Поскольку вы подключаете один и тот же обработчик событий снова и снова.

Каждый раз, когда SearchBox получает фокус (так что ваш .focus() обработчик работает), это означает, что еще один обработчик события, потому что .keyup() используется для подключения обработчика событий на элементе для keyup событие - каждый раз, когда вы звоните, вы прилагается еще один !

Я не знаю, почему вам нужен .focus() обработчик, вы можете просто сделать

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

или читать о .off().

Answer 2

Простое исправление: просто используйте метод one, чтобы прикрепить ваше фокусное событие.

... 

$("#youtube-headerContainer-searchBox").one('focus', function(){ 
    $(this).keyup(...); 
}); 

... 

Jquery Docs: http://api.jquery.com/one

Для вашего использования случае focus обработчик не нужен, хотя. Элементы ввода получат событие keyup только тогда, когда они будут сфокусированы.