添加带有茧的字段后执行javascript函数

Question

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

我的应用程序.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 中调用此函数。