Привязка (keyup) к динамическим элементам в jQuery (Twitter Bootstrap + typehead)

Question

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

Итак, я использую Twitter Boostrap с плагином typehead ().Я использую этот трюк , чтобы он работал с удаленными источниками данных.На данный момент все работает.Я нажимаю на текстовый ввод в моей форме, отмечаю его тегами, и скрипты загружают внешние источники, и появляется выпадающий список.Но у меня есть динамическое создание элементов, и вы решили, что это просто не будет работать на них.Я изучал метод live (), но, глядя на то, «как» запускаются сценарии, я просто не уверен, как его реализовать.

$('#anInputField').typeahead().on('keyup', function(ev){
 // stuff happens
});

Каждый раз, когда есть keyup, скриптзапускает запрос jSON, проверяет его вещи и возвращает результат обратно в typehead (), который выполняет автозаполнение части задания.Итак, как я могу сказать jQuery посмотреть на #aDropdownID, созданный после начальной привязки?Я продолжил и проверил, могу ли я использовать live (), но поскольку on () заменяет его ... Я не в курсе!

Любая помощь приветствуется!

Answer 1

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

$('#static-parent').on('keyup', '#aDropdownID', function(ev){
 // stuff happens
});

Если выне имеет статического родительского элемента, тогда вы всегда можете использовать body.

Answer 2

Это работает для меня:

$(document).on('keyup', '#YourInputFieldId', function () {
    //stuff happens
});