在ajax提交後重置自定義文件輸入

Question

我在通過ajax提交文件的表單上有自定義文件輸入。一切工作正常，表單被重置。但是我有一些JavaScript動作應該在文件輸入發生變化之後發生，但它只在第一次選擇和提交文件時起作用。

_form.html.erb

<%= simple_form_for(@medium, :html => { :id => 'media_form', :multipart => true }, remote: true) do |f| %> 

    <div class="custom-file-upload fu1_wrap"> 

     <label for="file-upload" class="cfu_label"><i class="icon-arrow-up icon-white"></i> Browse 
      <%= f.input :asset, label: false, error: false, as: :file, :input_html => { id: 'file-upload', class: 'cfu' } %> 
     </label> 

    </div> 

    <%= f.button :submit, 'Upload', :class => "btn btn-warning" %> 

<% end %> 

文件input.css

.custom-file-upload input[type="file"] { 
    /*opacity: 0; 
    filter: alpha(opacity=0);*/ 
    position: absolute; 
    left: -9999px; 
} 
.cfu_label { 
    padding: 6px 12px; 
    display: inline-block; 
    background: #f06048; 
    cursor: pointer; 
    color: #fff; 
    /* font-size: 15px; */ 
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); 
    border-radius: 5px; 
    opacity: .85; 
} 
.cfu_label:hover { 
    opacity: 1; 
} 

文件input.js

$(document).ready(function() { 

    $('#file-upload').change(function() { 
     $('i', '.fu1_wrap').removeClass("icon-arrow-up"); 
     $('i', '.fu1_wrap').addClass("icon-ok"); 
     $('label[for="file-upload"]', '.fu1_wrap').css("background-color", '#3fa46a'); 
    }); 

}); 

create.js.erb

$('i', '.custom-file-upload').removeClass("icon-ok"); 
$('i', '.custom-file-upload').addClass("icon-arrow-up"); 
$('.cfu_label', '.custom-file-upload').css("background-color", '#f06048'); 
$(".m_list").prepend("<%= escape_javascript(render :partial => @medium, :locals => {:medium => @medium}) %>"); 
$('#media').modal('hide'); 
$('#media_form')[0].reset(); 

正如我所說的形式提交完全正常;問題是如果我嘗試在第一個文件之後提交另一個文件，那麼我的file-input.js中的代碼似乎沒有被觸發，因爲按鈕不會再次更改。它只在第一次運作。我在這裏錯過了什麼？提前致謝。

Answer 1

您正在將事件處理程序附加到文檔「就緒」事件上，但此事件僅觸發一次 - 頁面首次完全加載時。正確的代碼會是這樣的：

$(document.body).on('change', '#file-upload', function() { 
    $('i', '.fu1_wrap').removeClass("icon-arrow-up"); 
    $('i', '.fu1_wrap').addClass("icon-ok"); 
    $('label[for="file-upload"]', '.fu1_wrap').css("background-color", '#3fa46a'); 
}); 

在這裏，我附加事件處理程序悄悄地到body標籤。 see documentation。

編輯：爲了讓您更深入瞭解正在發生的事情 - 您將事件處理程序附加到輸入DOM節點，但在通過ajax重新渲染rails視圖後，該節點消失了，rails UJS驅動程序將其插入重新呈現的視圖之前頁面的其餘部分，所以事件處理程序也不見了。