Rails 自动完成以父形式工作，但不能以嵌套形式工作。为什么？

Question

在带有 JEE 的 Rails 3.2 应用程序中，我试图在使用 Cacoon 的复杂嵌套表单中实现一个自动完成字段，如 Railscast #102。

我已经设法让类似的自动完成字段在父表单上完美运行。但是我无法让自动完成功能在嵌套表单上工作。似乎没有触发 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')
    });
}); 

父自动完成功能完美，孙子却不行。我错过了什么吗？有没有理由不能以嵌套形式工作？还是我的方法有误？

感谢任何指点。

编辑

孙子元素是异步添加的，父元素是在页面加载时呈现的。这似乎是问题的关键。当我打开现有记录进行编辑（即在页面加载时呈现和填充字段）时，自动完成功能对这些字段起作用。

解决方案

感谢 Chris Drappier，他为我指明了正确的方向。他说我在添加新的表单元素时需要添加我的观察者。

我现在有两个 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')
        }); 
    });
})

虽然 Chris 将我指向 .live() 函数，但显然它已被贬低，而 .on(focus) 提供了正确的功能。

谢谢克里斯！

Answer 1

这是一个棘手的问题，但我认为问题是您必须在添加新表单元素时添加观察者。如果您使用的是 jquery，则有处理这种情况的功能。请参阅 jquery 中的 api 文档以获取 live() 。我认为这应该能让你到达你需要的地方。