jQuery dragOver未触发

Question

我正在尝试使用一个js文件来管理上载文件的输入，但是无法获取dragover + dragleave + drop事件。我相信的问题是，我想在构造函数中添加侦听器。我该怎么做才能获得理想的设计？

let neededHTML = `<div class="uploadZone">

    <div id="disabledUpload" style="display: none">
        <i class="fa fa-lg fa-exclamation-circle"></i>
        <div>You cannot upload any more files.</div>
        <i class="fa fa-lg fa-exclamation-circle"></i>
    </div>

    <div id="uploadFile" class="uploadContainer">
        <div id="text">
            <div id="defaultText">
                <h3>Drag & Drop your file here to upload</h3>
                <h6>Or simply click this box and select your file manually</h6>
            </div>

            <div id="dropText" style="display: none;">
                <img id="dropHereIcon" src="../Content/images/drop-image.png" width="50" height="50" />
                <br />
                <h4>Drop here</h4>
            </div>
        </div>
        <input id="uploadFileInput" accept=".rar,.zip" type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" />
    </div>

    <div class="uploadMessages" style="display: none;">
        <div id="customMessage" style="display: none;"></div>

        <div id="errorMessage" style="display: none; color: red">
            <i class="fa fa-lg fa-exclamation-circle"></i>
            <div id="errorMessageText"></div>
            <button id="retryUploadError" type="button" onclick="uploadFileToServer()" class="btn btn-primary">Retry</button>
            <button id="cancelUploadError" type="button" onclick="resetUploadZone()" class="btn btn-default">Cancel</button>
        </div>
    </div>

    <div id="previewFile" class="uploadContainer" style="display: none">
        <div id="previewRar" style="display: none">
            <img src="../Content/images/rar.png" width="30" height="30" />
            <div id="previewRarText"></div>
            <div>
                <button type="button" class="uploadExistingFile btn btn-primary">Upload</button>
                <button type="button" onclick="resetUploadZone()" class="btn btn-default">Cancel</button>
            </div>
        </div>
        <div id="previewZip" style="display: none">
            <img src="../Content/images/zip.png" width="30" height="30" />
            <div id="previewZipText"></div>
            <div>
                <button type="button" class="uploadExistingFile btn btn-primary">Upload</button>
                <button type="button" onclick="resetUploadZone()" class="btn btn-default">Cancel</button>
            </div>
        </div>
        <br />
    </div>
</div>`;
function initializeHtml() {
    htmlParent.append(neededHTML);
}

function UploadFileManager(parent) {
    if (!$(parent).is(':empty')) {
        throw new Error("Container is not empty");
    }

    htmlParent = parent;
    dropzone = $('#uploadFile');

    initializeHtml();
    addEventsHandlers();
}
function addEventsHandlers() {
    dropzone.on('dragover', function (event) {
        event.preventDefault();
        event.stopPropagation();

        dropzone.addClass('dragover');
        var dt = event.originalEvent.dataTransfer;
        if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') !== -1 : dt.types.contains('Files'))) {
            showDropMessage();
        } else {
            showError("Only files of type zip and rar are allowed to be uploaded.");
        }
    });

    dropzone.on('dragleave', function (event) {
        dropzone.removeClass('dragover');
        event.preventDefault();
        event.stopPropagation();

        showDefaultMessage();
    });

    dropzone.on('drop', function (event) {
        e.preventDefault();
        e.stopPropagation();
        var dt = event.originalEvent.dataTransfer;
        if (dt.types && (dt.types.indexOf ? dt.types.indexOf('Files') !== -1 : dt.types.contains('Files'))
            && (dt.files[0].name.split('.').pop() === "rar"
                || dt.files[0].name.split('.').pop() === "zip")) {
            previewFile(dt.files[0]);
            //$('input#uploadFileInput').val(dt.files[0]);
        } else {
            showError("Only files of type zip and rar are allowed to be uploaded.<br> Drop files here to upload");
        }
    });

    $('.uploadExistingFile').on('click', uploadFileToServer);

    $("#uploadFile").on('change', 'input#uploadFileInput', uploadFileChangeEventHandler);
}

用法如下：

<div id="wrapper"></div>

<script>
    var fileManager = new UploadFileManager($('#wrapper'));
</script>

我相信我在构造函数中附加html的事实就是问题所在...