在以嵌套形式单击Cocoon gem中的“添加项目”后，如何再次调用Pickadate javascript？

问题描述

我有一个创建帐单（父级）的表单，该窗体接受帐单（子级）项目的嵌套属性。

结算单项目具有到期日期属性，我将日期选择器Pickadate.js封装在其上。

我的嵌套表格是用Cocoon制作的。茧运作良好。

Pickadate在第一次将页面加载到第一项上时起作用。但是，当我添加更多子项时，Pickadate不再适用于新的日期字段。

See screenshot of Billing statement form

_form.html.erb

boolean

_billing_statement_fields.html.erb

      <tbody class="billing_statement_items">
        <%= form.fields_for :billing_statement_items do |billing_statement_item| %>
          <%= render 'billing_statement_item_fields',f: billing_statement_item %>
        <% end %>
      </tbody>
    </table>
    <div class="form-group add-item">
      <%= link_to_add_association 'Add item',form,:billing_statement_items,data: {"association-insertion-node" => "tbody.billing_statement_items","association-insertion-method" => "append",:class => "add-items"}%>
    </div>

我觉得我的问题与我的javascript有关，它仅在加载页面时调用：

billing_statement.coffee

<tr class="nested-fields">
  <td>
    <%= f.text_field :due_date,class: 'form-control datepicker',placeholder: 'mm/dd/yyyy',required: 'true' %>
  </td>
  <td>
    <%= f.select :particulars,BillingStatementItem::PARTICULARS_OPTIONS,include_blank: "Select particular",required: 'true' %>
  </td>
  <td>
    <%= f.text_field :amount_due,placeholder: "Amount due",required: 'true' %>
  </td>
  <td>
    <%= link_to_remove_association "Remove item",f%>
  </td>
</tr>

添加项目后，如何更改它以再次调用pickadate（）？

解决方法

经过反复试验，我发现单击“添加项目”按钮再次调用pickadate时添加触发器会有些奏效。

$ ->
  $('.datepicker').pickadate()

  $('a').click ->
    $('.datepicker').pickadate()

现在唯一的问题是，最后（最新）渲染的子项仍未应用日期选择器。

一种（不好的）解决方法是在提交表单之前添加一个多余的项目，并删除最后一个项目。

一个更好的解决方案将不胜感激！

,

茧有callbacks，在这种情况下特别有用。在您的情况下，您会做类似的事情

$ -> 
  $('form').on('cocoon:after-insert',function(e,insertedItem) {
      insertedItem.find('.datepicker').datepicker();
  });