動態生成的字段（繭）和自動完成

Question

我正在使用cocoon js並嘗試自動完成工作。 截至目前，自動完成功能僅適用於初始字段。 單擊“添加字段”后，自動完成功能仍僅適用於第一個字段。

配方咖啡

$('.formulation_line_item_dna_name').focus ->
  $(this).autocomplete
    minLength: 2,
    source: ['foo', 'food', 'four']

composition.html.erb

...
<div class="formulation_line_items">
  <%= f.label :dna_name, "DNA", :class => "col-md-1 control-label unbold" %>
  <div class="col-md-3">
    <%= f.text_field :dna_name, :class => 'formulation_line_item_dna_name' %>
  </div>
</div>
...
<div class="add-more-formulation-line-items">
  <%= link_to_add_association 'Add Formulation Line Item', f, :formulation_line_items, 
      :class => 'btn btn-success' unless params[:command] == 'create child' %>
</div>
...

經檢查，似乎其他訂單項未附加ui-autocomplete-input類。 我嘗試將'ui-autocomplete-input'手動添加到所有動態生成的字段，但這沒有用。

我也嘗試添加

$('.add_fields').click ->

在我的composition.coffee文件中。 這仍然僅允許在第一個靜態字段上自動完成。

Answer 1

通過使用繭形回調，我能夠在動態生成的字段上成功允許自動完成：

$(document).ready(function(){
  $('.formulation_line_items')
    .on('cocoon:after-insert', function() {
      var tags = ["foo","foobar","foobaz"];
      $('.formulation_line_item_dna_name').focus(function(){
        $(this).autocomplete({
           minLength: 2,
           source: tags
            });
    });
  })  
});