用 cocoon 添加字段后执行 javascript 函数

Question

我正在 rails 中开发我的应用程序，在我的应用程序中，我正在通过 ajax 在模态 window 中提取一个表单，该表单有一个要添加的茧形按钮嵌套记录，当使用 cocoon 添加新的嵌套资源时，问题就来了，这些新字段不响应 javascript 函数，该函数检测字段是否更改了值

我的application.js

function validateFileType(){
  $( ".file_to_upload" ).change(function() {
    alert( "Handler for .change() called." );
  });
}

我的一部分 index.haml.erb:

  =link_to '<i class="fa fa-picture-o"></i>'.html_safe, adjuntar_archivos_path(:id => record), :remote => true

#adjuntar_archivos

我在控制器中的方法

  def adjuntar_archivos
    @billing = Billing.find_by_id(:id)
  end

我的adjuntar_archivos.js.erb

$("#adjuntar_archivos").html("<%=j render :partial => 'adjuntar_archivos'%>");

$("#addDataModelModal").modal("show"); 

validateFileType();

我的部分_adjuntar_archivos.html.haml

#addDataModelModal.modal.fade{"aria-hidden" => "true", "aria-labelledby" => "exampleModalLabel", role: "dialog", tabindex: "-1"}
  .modal-lg.modal-dialog{role: "document"}
    .modal-content
      = form_for(@billing, remote: true) do |f|
        .modal-header
          %h5#addDataModelModalLabel.modal-title Archivos adjuntos
          %button.close{"aria-label" => "Close", "data-dismiss" => "modal", type: "button"}
            %span{"aria-hidden" => "true"} ×
        .modal-body
          .links
            = link_to_add_association "<i class='fa fa-plus'></i> Añadir adjunto".html_safe, f, :billing_files, partial: 'billing_file_fields',:"data-association-insertion-node" => "tbody.adjuntos",:"data-association-insertion-method" => "prepend", class:"btn btn-success btn_naranja btn", id: "link_1"

          .row
            .col-md-12
              #payment_details
                %table.tabla_personalizada#tabla_detalle_pago
                  %thead
                    %tr
                      %th Descripción

                  %tbody.adjuntos
                    = f.fields_for :billing_files do |billing_file|
                      = render 'billing_file_fields', f: billing_file


        .modal-footer
          %button.btn.btn-secondary{"data-dismiss" => "modal", type: "button"} Close
          .text-center
            = f.submit 'Guardar', :class => 'pull-right btn btn-primary'

我的部分_billing_file_fields.html.haml

%tr.nested-fields.detalle_pago
  %td= f.text_field :description, class: 'form-control file_to_upload'

如何让 cocoon 创建的新字段也成为运行我的 javascript 函数的 .change 方法？

更新：

我尝试以下列方式在部分“billing_file_fields.html.haml”中执行函数：

%tr.nested-fields.detalle_pago
  %td= f.text_field :description, class: 'form-control file_to_upload'

- content_for :javascript do
  :javascript


    validateFileType();

但还是不行

Answer 1

尝试改变

    function validateFileType(){
        $( ".file_to_upload" ).change(function() {
            alert( "Handler for .change() called." );
        });
    }

到

    function validateFileType(){
        $(document).on('change', ".file_to_upload" ).change(function() {
            alert( "Handler for .change() called." );
        });
    }

该代码将确保任何元素（即使该元素是动态添加的）在更改时都会有给定的回调。

注意：请确保此函数仅被调用一次，因此请考虑在 index.haml.erb.

中调用此函数

用 cocoon 添加字段后执行 javascript 函数

execute javascript function after adding fields with cocoon

javascript

ruby-on-rails

ruby-on-rails-4

cocoon-gem

ruby-on-rails-5