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() 。我认为这应该能让你到达你需要去的地方。