当我用 ajax 调用 DropZone 插件时它不起作用

Question

当我用 ajax 调用时，插件不工作。

main.html

<html>
<head>
  <link rel="stylesheet" href="/vendor/dropzone/dist/min/basic.min.css">
  <link rel="stylesheet" href="/vendor/dropzone/dist/min/dropzone.min.css">
</head>
<body>


  <div class="ajaxBlock">

  </div>

<script src="/vendor/jquery/dist/jquery.js"></script>
<script src="/vendor/dropzone/dist/min/dropzone.min.js"></script>
<script>
  $(document).ready(function(){
    $.post('/calling-page.html', function(result){
      $('.ajaxBlock').html(result);
    });
  });
</script>
</body>
</html>

打电话-page.html

<form action="/file-upload" class="dropzone" id="my-awesome-dropzone"></form>

Answer 1

尝试以编程方式初始化它，如下所示：

因为您正在使用 <form> 元素；然后在启动时不需要指定 url: 选项：

$(document).ready(function(){
    $.post('/calling-page.html', function(result){
      $('.ajaxBlock').html(result);
      var myDropzone = new Dropzone("#my-awesome-dropzone");
    });
  });

或

$(document).ready(function(){
     $.post('/calling-page.html', function(result){
          $('.ajaxBlock').html(result);
          $("#my-awesome-dropzone").dropzone();
     });
});

当我用 ajax 调用 DropZone 插件时它不起作用

DropZone Plugin doesn't work when I call it with ajax

javascript

ajax

jquery

dropzone.js