解决方案编辑：

Question

我正在尝试将jquery-ui日期选择器添加到我的应用程序的嵌套表单字段中，但是当我使用新字段更新DOM时，我没有让日期选择器显示在已创建的字段上。这是我为该应用程序工作的代码。

<%= form_for(@load) do |f| %>
  <%= f.error_messages %>

  <%= f.fields_for :destinations do |builder| %>
    <%= render "destination_fields", :f => builder %>
  <% end %>
  <p><%= link_to_add_fields " Add Destination", f, :destinations %></p> 
<% end %> 

_destination_fields.html.erb
============================
<fieldset>
  <%= f.text_field :arrival_date, :placeholder => "From:", :class => "datepicker" %>
</fieldset>

添加字段的coffeescript：

jQuery ->

    $('form').on 'click', '.add_fields', (event) ->
        time = new Date().getTime()
        regexp = new RegExp($(this).data('id'), 'g')
        $(this).before($(this).data('fields').replace(regexp, time))
        event.preventDefault()

添加字段的功能：

def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields btn btn-primary icon-plus", data: { id: id, fields: fields.gsub("\n",""), :class => "datepicker" })
end

我写的javascript用于显示datepicker：

$(function() {
  $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
});

$(function() {
    $('.add_fields').on('click', function(){
      $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
    });
});

我已经在堆栈溢出上看到了这个问题的其他解决方案，但是他们的实现都没有解决我的问题。正如您可以看到javascript检查其上带有“datepicker”类的任何字段，然后将datepicker类添加到其中。我很确定你需要在按钮上添加一个回调函数，在单击它时添加新字段，这就是我所做的，但我不确定为什么我的函数不能正常工作。如果您需要更多信息来帮助解决这个问题，我很乐意提供。

解决方案编辑：

我将coffeescript文件更改为以下内容，以使其按预期工作：

 jQuery ->
   datepicker_update = -> $("input.datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true })

  $('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()
    datepicker_update()

这是下面提供的两个组合答案

Answer 1

您对'.add_fields'按钮的点击事件的回调是朝着正确方向迈出的一步。我用你的模板代码判断并且不清楚HTML有点难，但以下似乎是问题所在：

$(function() {
    $('.add_fields').on('click', function(){
      //Below $(this) refers to $('.add_fields'). I assume that is a button and is not what you want to apply the datepicker to. 
      $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
    });
});

您正在尝试将datepicker应用于$（'。add_fields'）。我通常做的是创建一个datepicker_update函数，如下所示：

function datepicker_update(){
    $(".datepicker").datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
}

然后每当我用新的日期字段更新DOM时，我都要确保给他们.datepicker类，然后我调用datepicker_update（）找到任何.datepicker字段并将它们变成datepickers。你可能想要包含一个测试来查看给定的字段是否已经应用了datepicker，尽管我相信jQuery UI可能已经这样做了？

此外，最好包括datepicker_update以及在一个事件回调中添加字段的过程，否则会导致时间问题，您正在尝试更新尚未完全进入DOM的字段的日期选择器。确保您的代码以正确的顺序执行...也许尝试使用一些console.log来检查。

Answer 2

由于自定义侦听器和嵌套表单侦听器同时工作，因此有时可能无法侦听click。我们的自定义侦听器可能在嵌套表单之前完成。在这种情况下，最后添加的字段将不会被处理。

所以不要使用下面的代码

 $('.add_fields').on('click', function(){

使用由嵌套表单触发的fieldAdded事件，如下所示，

  $(document).on('nested:fieldAdded', function(event){
    // this field was just inserted into your form
     $(this).datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
  })

查看here了解详情。

Answer 3

$(function() {
    $('.add_fields').on('click', function(){
      $('input.datepicker').datepicker({ dateFormat: 'yy-mm-dd', autoSize:true });
    });
});

将日期选择器添加到嵌套表单字段

解决方案编辑：

3 个答案: