Jquery: использовать autocomplete () для элементов ввода, добавленных на страницу после загрузки DOM - PullRequest
Новая
       16

Jquery: использовать autocomplete () для элементов ввода, добавленных на страницу после загрузки DOM

1 голос
/ 15 октября 2011

Я использую этот плагин автозаполнения, работающий с Jquery: jQuery Mod автозаполнения

Вы используете его простым добавлением $ («селектор»). Autocomplete (url [, options]);

При загрузке страницы есть 5 элементов ввода (id = канал, за которым следует число), поэтому я использую этот код для запуска плагина автозаполнения на каждом входе: 

$(document).ready(function() {
      $('input[id^="channel"]').each(function(){       
        $(this).autocomplete(
          "autocomplete/autocomplete.php",
          {
                some options that don't matter now I guess
          }
        );        
  });
});

Но сейчасЯ также хочу, чтобы плагин автозаполнения работал с элементами ввода (с тем же синтаксисом идентификатора), которые добавляются путем вызова функции javascript (путем нажатия на ссылку) после загрузки страницы.

I теперь есть live () функции Jquery, но я просто не знаю, как мне использовать ее здесь.

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

Заранее спасибо!

Фил

1 Ответ

2 голосов
/ 15 октября 2011

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

$(document).ready(function() {
    var nextChannel = $('input[id^="channel"]').length + 1;
    function addAutocomplete( selector) {
        $(selector).each(function(){       
           $(this).autocomplete(
              "autocomplete/autocomplete.php",
              {
                    some options that do not matter now I guess
           });        
        });
    });
    addAutocomplete('input[id^="channel"]');

    $('.addSearch').click( function() {
         var input = $('<input id="channel' + nextChannel + '" type="text" />')
                        .appendTo('form');
         addAutocomplete( input );
         ++nextChannel;
         return false;
    });
});
...