Как подключить событие keyup изнутри плагина jQuery

Question

У меня есть плагин jQuery, и внутри него у меня есть функция init. Внутри этой функции Init-я прилагаю некоторые события:

(function ($) { 

    $.fn.gallery = function(options) { 

     var init = function(self) { 

      var main += '<input id="gallery-search">'; 

      //click event for the filter checkboxes 
      $("body").on('click', self.selector+" .gallery-filter-checkbox",function(event) { 
       self.data(filter(self)); 
      }); 

      //capture input in the search box 
      $('#gallery-search').keyup(function(){ 
       console.log('test'); 
      }); 

      self.html(output); 

     } 

    }(jQuery)); 

} 

Первый из них работает просто отлично, но второй один не работает. Я тестировал его вне области плагина, и он работает нормально, поэтому нет синтаксической ошибки, но, вероятно, ошибка в том, как я пытаюсь подключить событие?

Answer 1

С #gallery-search создается динамически, вы можете использовать delegated event handler:

$(document).on('keyup', '#gallery-search', function() { ... }); 

Если self представляет статический HTML-элемент на странице, вы можете использовать немного лучше (для исполнения) версии:

self.on('keyup', '#gallery-search', function() { ... }); 

Или вы можете поместить обработчик события в код после вставки элемента, если HTML не будет изменен позже:

self.html(output); 
$('#gallery-search').keyup(function() 
{ 
    console.log('test'); 
}); 

Answer 2

keyup() - это ярлык для bind('keyup',callback), который зарегистрирует некоторый обработчик событий на элементах, которые уже присутствуют в DOM (не обязательно отображаются). Он не будет работать, если элемент отсутствует в DOM, когда он определен. Для этого вам необходимо использовать delegate(), который будет прикреплять некоторый обработчик к элементу, который в настоящее время доступен или может быть доступен в будущем.

Начиная с jQuery 1.7, рекомендуется использовать on(), поскольку он сочетает в себе функциональность bind/delegate/live.

на() можно использовать двумя способами

$(selector).on('event',callback); 
$(parentSelector).on('event','someChildSelector', callback); 

Сначала один обработчик является прямым и второй называется делегированы обработчик. Если вы используете первый для регистрации обработчиков событий, вы должны убедиться, что элемент присутствует в DOM во время регистрации, как bind(). Поэтому, если вы добавляете новые элементы, вам придется снова присоединить этот обработчик.

Если вы используете второй путь, вам не придется беспокоиться о регистрации обработчика снова

$(document).on('click','.row',callback); 

Как документ всегда доступен, вы обратный вызов будет зарегистрирован как обработчик щелчка для всех существующих строк и любой новой строки, которую вы можете добавить в будущем.

Я настоятельно рекомендую вам ознакомиться с разделом here. Они даже объясняют преимущества производительности.

Теперь, когда вы знаете, как это работает, вы можете исправить это, используя on() либо как прямой обработчик, либо как делегированный обработчик.

EDIT: Лучше использовать ближайший статический родитель, чем документ/тело, при использовании on() для регистрации делегированных обработчиков. Спасибо Regent за то, что вы указали, что :)

$('closestStaticParent').on('keyup','#gallery-search',function(){ 
     console.log('test'); 
    });