Question

我正在使用Dropzone.js将附件上传到我的应用程序，我需要在每个上传的附件上删除链接以触发Ajax请求，以便点击即可：

从服务器销毁给定的实例
从放置区删除附件预览。

我还通过dropbox区域中的模拟渲染渲染已存在于服务器中的附件（如果有的话）。

目前一切正常，除非我正在尝试删除刚刚上传的附件（即在任何页面重新加载之前）。在这种情况下，虽然删除了预览，但不会触发Ajax调用。

我确定这是因为on click事件绑定到已在重新加载时创建的删除链接，但它不绑定到最近创建的元素。

我已经尝试过绑定这样的事件：

$(".dz-remove").on("click", function (e) { 
  // my Ajax request
});

对此没有成功。

$('body').on('click', '.dz-remove', function() {
    // my Ajax request
});

我想知道你是否可以帮我找到解决方案。

我的整个Dropzone配置和初始化

Dropzone.options.attachmentForm = { // The camelized version of the ID of the form element
  uploadMultiple: false,
  parallelUploads: 4,
  maxFiles: 4 - gon.attachments.length,
  paramName: "attachment[content]",
  addRemoveLinks: true,

  init: function() {
    var myDropzone = this;
    var existingFileCount = gon.attachments.length; // The number of files already uploaded
    gon.attachments.forEach(function(el, index) {
        var mockFile = { name: el.id, size: 0 };
        myDropzone.emit("addedfile", mockFile);
        myDropzone.emit("thumbnail", mockFile, el.content.standard.url);
        myDropzone.emit("complete", mockFile);
    });

    $(".dz-remove").on("click", function (e) {
     e.preventDefault();
     e.stopPropagation();

     var attachmentId = $(this).parent().find(".dz-filename > span").text();
       $.ajax({
         url: "/attachments/" + attachmentId,
         method: 'DELETE',
         data: { id: attachmentId },
         type: 'POST',
         success: function (data) {
              if (data.NotificationType === "Error") {
                   toastr.error(gon.attachmentsErrors);

              } else {
                existingFileCount = existingFileCount - 1;
                myDropzone.options.maxFiles = myDropzone.options.maxFiles + 1;
                toastr.success("File deleted");
              }},
              error: function (data) {
                   toastr.error(data.Message);
              }
       })
     });

     myDropzone.on("success", function(file) {
       existingFileCount = existingFileCount + 1;
       myDropzone.options.maxFiles = myDropzone.options.maxFiles - 1;

      //  this.removeFile(file);
     });
  }
}

我在铁轨中的表单

  <%= simple_form_for(@attachment, remote: true, authenticity_token: true, html: {id:'attachment_form', class:'dropzone' }) do |f| %>
  <%= f.error_notification %>
      <div class="form-inputs">
          <%= f.input :attachable_id, :as => :hidden,  :required => true, :autofocus => true, input_html: {value: @answer.id } %>
          <%= f.input :attachable_type, :as => :hidden, :required => true, :autofocus => true, input_html: {value: 'Answer'} %>
      </div>  
  <% end %>

无法在Dropzone.js init函数内动态绑定和事件处理程序

0 个答案: