javascript - 在 ruby​​ on rails 5 应用程序中使用带有 Materialize Css 和简单表单的 Cocoon Gem 时出现日期选择器问题

Question

我在我的 Rails 应用程序中使用 Cocoon gem 作为嵌套表单。我将它与 materialize-form gem 一起使用，这使我可以将 materialize css 与简单形式一起使用。

在 materialize-form gem notes 中，它提供了使用嵌套表单 gem 来使用嵌套表单的解决方案(仅适用于 Rails 3)。我正在使用 cocooon gem。我遇到这个问题，“你在嵌套字段中输入了一个日期，你想为它使用 jQuery datepicker。这有点棘手，因为你必须在插入字段后激活 datepicker。”

完整描述位于此处的 Javascript 事件部分下。 https://github.com/ryanb/nested_form

我相信解决方案是使用此代码。

$(document).on('nested:fieldAdded', function(event){
  window.materializeForm.init()
})

它从 nested_form gem 代码中监听 nested:fieldAdded 事件。有谁知道在使用 cocoon gem 时如何找到我需要监听的事件？为了在我创建新的嵌套字段时重新加载 materializeForm，以便它选择日期选择器。

如果需要，我可以在 heroku 中设置一个示例应用程序，这个示例不清楚，但是当 cocoon gem 添加新的嵌套字段时，它基本上不会重新运行实体化表单。

任何帮助将不胜感激。谢谢。

在我的 Html 代码中添加 >>>

//_form.html.erb 文件

   <h3>Dates</h3>
    <div id="schedules">
            <%= f.simple_fields_for :schedules do |schedule| %>
                <%= render 'schedule_fields', f: schedule %>
            <% end %>
            <div class="links">
                <%= link_to_add_association 'Add Schedule', f, :schedules %>
      </div>
    </div>

//_schedule_fields.html.erb 文件

<div class="nested-fields">
  <%= f.input :event_schedule, label_html: { class: "active"}, wrapper_html: { class: 'col m12 s12 ' }, class: "datepicker" %>
  <%= link_to_remove_association "Remove Schedule", f %>
</div>

* 使嵌套字段与回调一起工作的解决方案代码 *

$(document).on('cocoon:after-insert', (function(event) {
    window.materializeForm.init() 
}));

Answer 1

如果您指的是在插入/移除项目时调用的事件，那么以下内容可能会有所帮助。查看 Cocoon 的官方 Github 存储库(搜索回调)以获取更多信息。 https://github.com/nathanvda/cocoon

// A callback for cocoon so whenever a new association is made; the below will be executed.
$(document).on('cocoon:after-insert', (function(event) {

}