Я искал везде, но я не могу найти никакой помощи...
У меня есть несколько текстовых полей, которые динамически создаются через JS, поэтому мне нужно привязать все их классы к автозаполнению. В результате мне нужно использовать новый параметр .live().
В качестве примера можно связать все элементы с классом .foo теперь и в будущем:
$('.foo').live('click', function(){
alert('clicked');
});
Он принимает (и ведет себя) то же самое, что и .bind(). Тем не менее, я хочу связать автозаполнение...
Это не работает:
$('.foo').live('autocomplete', function(event, ui){
source: 'url.php' // (surpressed other arguments)
});
Как я могу использовать .live() для связывания автозаполнения?
ОБНОВЛЕНИЕ
Выяснил это с помощью Framer:
$(function(){
$('.search').live('keyup.autocomplete', function(){
$(this).autocomplete({
source : 'url.php'
});
});
});
Если вы используете jquery.ui.autocomplete.js попробуйте это вместо
.bind("keydown.autocomplete") or .live("keydown.autocomplete")
если нет, используйте jquery.ui.autocomplete.js и посмотрите, будет ли он работать
Если это не применимо, я не знаю, как вам помочь bro
Функция автозаполнения jQuery UI автоматически добавляет к элементу класс "ui-autocomplete-input". Я бы рекомендовал жить привязку элемента к фокусу без "ui-autocomplete-input" класса, чтобы предотвратить повторное привязку к каждому событию keydown внутри этого элемента.
$(".foo:not(.ui-autocomplete-input)").live("focus", function (event) {
$(this).autocomplete(options);
});
Edit
Мой ответ теперь устарел с jQuery 1.7, см. комментарий Nathan Strutz для использования с новым синтаксисом .on().
Чтобы добавить, вы можете использовать плагин .livequery:
$('.foo').livequery(function() {
// This will fire for each matched element.
// It will also fire for any new elements added to the DOM.
$(this).autocomplete(options);
});
Чтобы автозаполнение работало при динамической загрузке события on(), используемого в jQuery > 1.7, используя синтаксис, Nathan Strutz дает в своем комментарии:
$(document).on('focus', '.my-field:not(.ui-autocomplete-input)', function (e) {
$(this).autocomplete(options)
});
где .my-field - это селектор для вашего входного элемента автозаполнения.
.live() не работает с фокусом. также keyup.autocmplete не имеет никакого смысла. Вместо этого я пробовал и работаю, это
$(document).ready(function(){
$('.search').live('keyup' , function()
{
$(this).autocomplete({ source : 'url.php' });
});
})
Это прекрасно работает.
Вы не можете..live() поддерживает только фактические события JavaScript, а не любое пользовательское событие. Это фундаментальное ограничение того, как работает .live().
Вы можете попробовать:
$('.foo').live('focus.autocomplete', function() {
$(this).autocomplete({...});
});
После чтения и тестирования всех остальных ответов я обновил его для текущей версии JQuery и сделал несколько настроек.
Проблема с использованием keydown как события, вызывающего .autocomplete(), заключается в том, что он не может автозаполнять эту первую букву. Использование фокуса - лучший выбор.
Еще одна вещь, которую я заметил, заключается в том, что все данные решения приводят к тому, что .autocomplete() вызывается несколько раз. Если вы добавляете элемент динамически на страницу, которая не будет удалена снова, событие должно запускаться только один раз. Даже если элемент должен быть удален и добавлен снова, событие должно быть удалено, а затем добавлено обратно каждый раз, когда элемент будет удален или добавлен, так что фокусировка на поле снова не будет излишне вызывать .autocomplete() каждый раз.
Мой последний код выглядит следующим образом:
$(document).on('focus.autocomplete', '#myAutocomplete', function(e){
$(this).autocomplete(autocompleteOptions);
$(document).off('focus.autocomplete', '#myAutocomplete');
});
autocomplete - это не событие, а функция, которая позволяет использовать функции автозаполнения для текстового поля.
Итак, если вы можете изменить js, который динамически создает текстовые поля, чтобы обернуть элемент textbox в качестве объекта jquery и вызвать автозаполнение этого объекта.
Я только что заметил, что вы отредактировали свой пост с этим ответом. Для меня это было очевидно, поэтому я размещаю его ниже для других. Спасибо.
$(function()
{
$('.search').live('keyup.autocomplete', function()
{
$(this).autocomplete({ source : 'url.php' });
});
});
Это работает для меня:
$(function()
{
$('.item_product').live('focus.autocomplete', function()
{
$(this).autocomplete("/source.php/", {
width: 550,
matchContains: true,
mustMatch: false,
selectFirst: false,
});
});
});
Вы можете просто включить автозаполнение внутри входного события, например:
$('#input-element').live('input', function(){
$("#input-element").autocomplete(options);
});