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')
    });
});

父自动完成工作正常，孙子不是。我错过了什么吗？有没有理由认为这不适用于嵌套形式？或者我的做法是否犯了错误？

感谢任何指针。

修改

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

解

感谢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（焦点）提供了正确的功能。

谢谢Chris！

Answer 1

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

Rails自动完成工作在父级但不是嵌套的形式。为什么？

1 个答案: