Javascript 无法在dropzone中添加事件处理程序

我通过点击按钮来调用addDropzone（）函数，该函数在需要多个dropzone元素时传递一个值，但一次只传递一个元素，但位于不同的div上，因此函数中的“val”参数有助于定义div id。我能够运行dropzone元素。它还将文件保存在服务器上，但我无法使事件处理程序正常工作

这就是我正在使用的函数

还有，如果有人能建议我一种在事件处理程序中读取服务器消息的方法

JAVASCRIPT代码

函数addDropzone（val）{
document.getElementById（“div2”）.innerHTML=''；
var myDropzone=新Dropzone（“div#my Dropzone-”+val）；
Dropzone.options.myDropzone={
paramName:'文件'，
方法：“post”，
maxFiles:1，
url:'file upload.php'，
dictDefaultMessage：“拖动图像”，
可点击：false，
最大文件大小：512，
uploadMultiple:false，
addRemoveLinks：是的，
强制回退：正确
};
Dropzone.options.myDropzone=false；
options.myDropzone.enable（）；
Dropzone.options.myDropzone={
init:function（）{
this.on（“MaxFilesExcepended”，函数（文件）{alert（“文件限制1”）；}）；
this.on（“complete”，函数（文件）{alert（serverReponse）；}）；
}
};
}

不知道dropzone，但就我对文档的理解而言，我会这样写：

function addDropzone(val){
  var dropZoneId= "my-dropzone-"+val;
  // this line has moved-up, and the option is not referenced in the same way
  Dropzone.options[dropZoneId] = false;
  // proper way of adding new content to div2 without losing event handlers
  var div = document.createElement('div');
  div.innerHTML = '<div class="item" style="width:96%; margin:5px auto; position:relative; height: auto; background-color:lightgray;"><form action="file-upload.php" class="dropzone" id="'+dropZoneId+'"></form></div>';
  document.getElementById("div2").appendChild(div.firstChild);           
  var myDropzone = new Dropzone("#"+dropZoneId,{
        paramName: 'file',
        method: 'post',
        maxFiles: 1,
        url: 'file-upload.php',
        dictDefaultMessage: "Drag your images for zone "+val,
        clickable: false,
        maxFilesize: 512,
        uploadMultiple: false,
        addRemoveLinks: true,
        forceFallback:false,
        init: function(){
           // from the doc, quick debug
           this.on("addedfile", function(file) { alert("added file in zone."+val); });
           this.on("maxfilesexceeded", function(file) { alert("File limit 1"); });
           this.on("complete", function(file) {alert(serverReponse);});
           }
        });      
}
$(document).ready(function(){
     addDropzone(1);
     addDropzone(2);
    }
   );

函数addDropzone（val）{
var dropZoneId=“我的dropzone-”+val；
//此行已上移，并且该选项未以相同方式引用
选项[dropZoneId]=false；
//在不丢失事件处理程序的情况下向div2添加新内容的正确方法
var div=document.createElement（'div'）；
div.innerHTML=''；
document.getElementById（“div2”）.appendChild（div.firstChild）；
var myDropzone=新的Dropzone（“#”+dropZoneId{
paramName:'文件'，
方法：“post”，
maxFiles:1，
url:'file upload.php'，
dictDefaultMessage：“为区域拖动图像”+val，
可点击：false，
最大文件大小：512，
uploadMultiple:false，
addRemoveLinks：是的，
强制回退：错误，
init:function（）{
//从文档中，快速调试
this.on（“addedfile”，函数（文件）{alert（“在区域中添加了文件。”+val）；}）；
this.on（“MaxFilesExcepended”，函数（文件）{alert（“文件限制1”）；}）；
this.on（“complete”，函数（文件）{alert（serverReponse）；}）；
}
});      
}
$（文档）.ready（函数（）{
addDropzone（1）；
添加降凝剂（2）；
}
);

我非常感谢您的帮助，但代码仍然不变。您将init:function（）包含在.options类中。。但在动态加法的情况下，它仍然不起作用。当我在静态版本上做同样的事情时，如果一切顺利。我想知道是不是Jquery代码的位置不允许它这样做work@Parminder你应该更仔细地观察。代码并没有保持不变。你试过这个密码吗？我编辑并指出了不同之处。选项引用方式的要点是：

Dropzone.options[dropZoneId]

而不是

Dropzone.options.myDropzone

（它根本不使用

val

）是的，现在我只是尝试了完全相同的方法。。它正在做所有的事情（上传文件并保存它们），但不确认事件..您将a+=而不是a=。。。你指的是innerHTML部分（innerHTML+=''；这样..@Parminder找到了一些有用的东西。编辑了我的答案并看到了这把小提琴

function addDropzone(val){
  var dropZoneId= "my-dropzone-"+val;
  // this line has moved-up, and the option is not referenced in the same way
  Dropzone.options[dropZoneId] = false;
  // proper way of adding new content to div2 without losing event handlers
  var div = document.createElement('div');
  div.innerHTML = '<div class="item" style="width:96%; margin:5px auto; position:relative; height: auto; background-color:lightgray;"><form action="file-upload.php" class="dropzone" id="'+dropZoneId+'"></form></div>';
  document.getElementById("div2").appendChild(div.firstChild);           
  var myDropzone = new Dropzone("#"+dropZoneId,{
        paramName: 'file',
        method: 'post',
        maxFiles: 1,
        url: 'file-upload.php',
        dictDefaultMessage: "Drag your images for zone "+val,
        clickable: false,
        maxFilesize: 512,
        uploadMultiple: false,
        addRemoveLinks: true,
        forceFallback:false,
        init: function(){
           // from the doc, quick debug
           this.on("addedfile", function(file) { alert("added file in zone."+val); });
           this.on("maxfilesexceeded", function(file) { alert("File limit 1"); });
           this.on("complete", function(file) {alert(serverReponse);});
           }
        });      
}
$(document).ready(function(){
     addDropzone(1);
     addDropzone(2);
    }
   );