Javascript 向嵌套表单字段添加日期选择器

我试图将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>

用于添加字段的函数：

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

我为显示datepicker而编写的javascript：

$(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()

---

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

您对“.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 });
    });
});

您正在尝试将日期选择器应用于$（'.add_fields'）。我通常会创建一个datepicker_update函数，如下所示：

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

然后，每当我用新的日期字段更新DOM时，我都会确保给它们.datepicker类，然后调用datepicker_update（），它会找到任何.datepicker字段并将它们转换为日期选择器。您可能希望包括一个测试，以查看给定字段是否已经应用了datepicker，尽管我相信jQueryUI可能已经这样做了

---

此外，最好将datepicker_更新和添加字段的过程包含在一个事件回调中，否则可能会导致时间问题，即您试图为尚未完全进入DOM的字段更新datepicker。确保您的代码按正确的顺序执行…也许可以尝试使用一些console.log进行检查。

由于自定义侦听器和嵌套表单侦听器同时工作，因此侦听

单击可能有时不起作用。我们的自定义侦听器可能在嵌套表单之前完成。在这种情况下，将不会处理最后添加的字段

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

所以不要使用下面的代码

 $('.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 });
  })

查看详细信息。
链接到（名称，“#”，类：“添加字段btn btn主图标+”，数据：{id:id，fields:fields.gsub（“\n”，”），：class=>“datpicker”}）中的键入数据选择器修复了键入错误，但这只会影响按钮的数据类，而不会影响我试图针对的输入字段。好的，所以我不确定链接的作用，但是在js click函数中，您将dtepicker附加到链接标记，而不是文本字段；方法。我需要找到一种方法来定位正确的字段。这个解决方案对我不起作用，但很接近。看看这里，看看我对解决方案的看法。我使用了本文中的建议来帮助我解决这个问题：谢谢你的建议，我通过修改我的coffeescript文件来让它工作，因为这就是处理is click事件的地方。下面是使其工作的代码：datepicker_update=->$（“input.datepicker”）.datepicker（{dateFormat:'yy mm dd'，autoSize:true}），然后在event.preventDefault之后调用datepicker_update（）