в приложении Rails 3.2 с JEE я пытаюсь реализовать поле автозаполнения в стиле Railscast # 102 в сложной вложенной форме с использованием Cacoon.
Мне удалось получить аналогичное поле автозаполнения, прекрасно работающее в родительской форме. Однако я не могу заставить автозаполнение работать на вложенной форме. Похоже, что JavaScript не запускается.
Моя форма выглядит примерно так:
<%= form_for @parent do |f| %>
<%= f.text_field :name, :class=>"parent-name", :data => {:autocomplete_source => Model.order(:name).map(&:name) } %>
<%= f.fields_for :children do |child| %>
<%= f.fields_for :grand_children do |grand_child| %>
<%= f.text_field :name, :class=>"grand-child-name", :data => {:autocomplete_source => Model.order(:name).map(&:name) } %>
<% end %>
<% end %>
<% end %>
У меня есть две функции JavaScript
$(function() {
$('.parent-name').autocomplete({
source: $('.parent-name').data('autocomplete-source')
});
});
$(function() {
$('.grand-child-name').autocomplete({
source: $('.grand-child-name').data('autocomplete-source')
});
});
Функция родительского автозаполнения работает отлично, а внук - нет. Я что-то пропустил? Есть ли причина, по которой это не будет работать во вложенной форме? Или я ошибся в своем подходе?
Благодарен за любые указатели.
EDIT
Элементы grand-child добавляются асинхронно, родительский элемент отображается при загрузке страницы. Это, кажется, ключ к проблеме. Когда я открываю существующую запись для редактирования (то есть поля отображаются и загружаются при загрузке страницы), в этих полях действует автозаполнение.
РЕШЕНИЕ
Спасибо Крису Дрэппье, который указал мне правильное направление. Он сказал, что мне нужно добавить наблюдателя при добавлении нового элемента формы.
Теперь у меня есть две функции jquery. Оригинал
$(function() {
$('.grand-child-name').autocomplete({
source: $('.grand-child-name').data('autocomplete-source')
});
});
и
$(function() {
$(document).on("focus",".grand-child-name", function() {
$('.grand-child-name').autocomplete({
source: $('.grand-child-name').data('autocomplete-source')
});
});
})
Хотя Крис указал мне на функцию .live (), очевидно, что это не рекомендуется, а .on (focus) обеспечивает правильную функциональность.
Спасибо, Крис!