execute javascript function after adding fields with cocoon

Question

I'm developing my application in rails, in my app I'm extracting a form in a modal window through ajax, the form has a cocoon button to add nested records, the problem comes when adding new nested resources with cocoon those new fields do not respond to a javascript function that detects if the field changed the value

my application.js

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

part of my index.haml.erb:

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

my method in controller

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

my adjuntar_archivos.js.erb

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

my partial _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' 

my partial _billing_file_fields.html.haml

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

how can i make the new fields created by cocoon also run the .change method of my javascript function?

UPDATE:

I have tried to execute the function within the partial "billing_file_fields.html.haml" in the following way:

%tr.nested-fields.detalle_pago %td= f.text_field :description, class: 'form-control file_to_upload' - content_for :javascript do :javascript validateFileType(); 

but it still doesn't work

Answer 1

Try changing

---

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

---

To

---

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

---

The code will make sure that any element (even if the element is dynamically added) will have the given callback on change.

NOTE: PLEASE MAKE SURE THAT THIS FUNCTION IS CALLED ONLY ONCE SO CONSIDER CALLING THIS FUNCTION IN index.haml.erb.