在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驱动程序将其插入重新呈现的视图之前页面的其余部分，所以事件处理程序也不见了。