>source

레일에서 응용 프로그램을 개발 중입니다. 내 응용 프로그램에서 ajax를 통해 모달 창에서 양식을 추출하고 있습니다. 양식에는 중첩 레코드를 추가하는 누에 고치 버튼이 있습니다. 문제는 새 필드에서 누에 고치를 사용하여 새 중첩 리소스를 추가 할 때 발생합니다. 필드가 값을 변경했는지 감지하는 자바 스크립트 함수에 응답하지 않음

내 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();

하지만 여전히 작동하지 않습니다

  • 답변 # 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 .

  • 이전 reactjs - 도트 연산자와 함께 사용할 수 있도록 디렉토리의 모든 파일을 내보내는 방법은 무엇입니까?
  • 다음 html - 각도 8 - json 객체를 클립 보드에 복사