在單擊嵌套形式的 Cocoon gem 中的“添加項目”后，如何再次調用 Pickadate javascript？

Question

我有一個表單來創建帳單（父），它接受帳單項（子項）的嵌套屬性。

賬單項目有一個截止日期屬性，我已經在它上面包裝了一個日期選擇器 Pickadate.js。

我的嵌套表單是用 Cocoon 制作的。 Cocoon 運行良好。

Pickadate 在第一次加載第一個項目的頁面時工作。 但是，當我添加更多子項時，Pickadate 不再適用於新的日期字段。

請參閱賬單表格的屏幕截圖

_form.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>

_billing_statement_fields.html.erb

<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>

我覺得我的問題與我的 javascript 有關，它只在加載頁面時調用：

billing_statement.coffee

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

添加項目時，如何將其更改為再次調用 pickadate()？

Answer 1

經過多次反復試驗，我發現在單擊“添加項目”按鈕時添加觸發器以再次調用 pickadate 有點奏效。

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

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

現在唯一的問題是最后一個（最新的）呈現的子項仍然沒有應用日期選擇器。

一個（不好的）解決方法是在提交表單之前添加一個不必要的項目並刪除最后一個項目。

一個更好的解決方案將不勝感激！

Answer 2

Cocoon 有回調，在這種情況下特別有用。 在你的情況下，你會做類似的事情

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