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