Привязать (keyup) к динамическим элементам в jQuery (Twitter Bootstrap + typehead)
Я думаю, некоторые из вас, должно быть, нахмурились брови, читая это название, а? Я уверен, что люди спрашивают об этом каждый раз, но я не видел своего конкретного вопроса, поэтому я пытаюсь! Связывание событий с динамически создаваемыми элементами - это мой криптонит, я просто не могу обернуть вокруг него голову...
Так хорошо, я использую Twitter Boostrap, с плагином typehead(). Я использую этот трюк, чтобы заставить его работать с удаленными источниками данных. На данный момент все работает. Я нажимаю на текстовый ввод в моей форме, помечен для него, и скрипты загружают внешние источники, и появляется раскрывающийся список. Но у меня есть динамическое создание элемента, и вы поняли, что он просто не будет работать на них. Я изучал метод live(), но, глядя на "как" сценарии запускаются, я просто не знаю, как я могу его реализовать.
$('#anInputField').typeahead().on('keyup', function(ev){
// stuff happens
});
Каждый раз, когда есть keyup, script запускает запрос jSON, проверяет его вещи и возвращает результат в typehead(), который выполняет автозаполнение части задания. Итак, как я могу сказать jQuery, чтобы посмотреть на #aDropdownID, созданный после первоначального связывания? Я продолжал и проверял, могу ли я использовать live(), но поскольку on() заменяет его... Я не знаю!
Любая помощь оценивается!
Ответы
Ответ 1
Для on()
, чтобы иметь возможность делегировать, вы должны называть его статическим элементом, который, как вы знаете, всегда будет там, а затем вы передаете динамический элемент, например:
$('#static-parent').on('keyup', '#aDropdownID', function(ev){
// stuff happens
});
Если у вас нет статического родительского элемента, вы всегда можете использовать body
.
Ответ 2
Это работает для меня:
$(document).on('keyup', '#YourInputFieldId', function () {
//stuff happens
});