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

您正在文档“ready”事件上附加事件处理程序，但此事件仅触发一次 - 首次完全加载页面时。正确的代码是这样的：

$(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驱动程序将其删除插入重新渲染视图之前的页面，因此事件处理程序也消失了。

ajax提交后重置自定义文件输入

1 个答案: