dropzone - var this not working (xhr formdata) inside another function's callback 第一次点击

Question

我有一个带有 dropzone 的注册表单，我想使用插件验证它（字段）。我在 dropzone init 和它的函数回调中调用这个插件，我处理 dropzone 队列并附加表单数据。

问题是，我第一次点击 <a id="click">Send</a> 按钮时，没有任何反应：它只是进入函数的回调并且什么都不做（myDropzone 不起作用），只有 console.log()（我用来调试的）。

这是我正在使用的插件：

(function($) {
    $.fn.formly = function(callback) {
        $('a#click').on('click', function() {
            if (callback) {

                var clientInfo = form.find(':input').serializeArray();

                clientInfo.splice(-1, 1);
                clientInfo.splice(-1, 1);

                // Password hash function
                var p = $('#reg_pwd').val(),
                    c = $('#confirm_pwd').val(),
                    shaObj = new jsSHA('SHA-512', 'TEXT');

                shaObj.update(p);
                var p_hash = shaObj.getHash("HEX"),
                    shaObj = new jsSHA('SHA-512', 'TEXT');

                shaObj.update(c);
                var c_hash = shaObj.getHash("HEX");

                callback(clientInfo, p_hash, c_hash);
            }
        });
    };
})( jQuery );

这是空降区初始化：

init: function() {
    var myDropzone = this;

    $('#register').formly(function(clientInfo, p_hash, c_hash) {
console.log(myDropzone);
        myDropzone.processQueue();

        myDropzone.on('sending', function(data, xhr, formData) {
            formData.append('client_info', JSON.stringify(clientInfo)),
            formData.append('particular', 0),
            formData.append('reg_pwd', p_hash),
            formData.append('confirm_pwd', c_hash)
        });

    });

    myDropzone.on('success', function(file, response) {
        myDropzone.removeFile(file);
        console.log( 'Error: ' + response );
    });
}

我可以在控制台中看到记录的对象。

当我第一次点击按钮时，好像没有任何东西（没有 xhr 请求）发送到服务器。

我第二次点击 "Send" 它确实起作用了（它发送了 xhr 请求）并且我得到了服务器响应 (myDropzone.on('success')。

为什么第一次就成功了？我做错了什么，我该如何解决？

Answer 1

我不清楚为什么代码会这样，但我缺乏必要的知识（理论）来正确解释它。

无论如何，我（认为）找到了一个合适的方法，我希望它能达到好技术的标准。我现在正在使用一个函数在 dropzone init 中填充一个作用域对象，以便 .on('sending')（应该在插件回调之外）可以访问表单数据：

init: function() {

    var myDropzone = this,
        client = {};

    function getClientData(clientInfo, p_hash, c_hash) {
        client.clientInfo   = clientInfo;
        client.p_hash       = p_hash;
        client.c_hash       = c_hash;
        myDropzone.processQueue();
    };

    $('#register').formly(function(clientInfo, p_hash, c_hash) {

        getClientData(clientInfo, p_hash, c_hash);

    });

    myDropzone.on('sending', function(data, xhr, formData) {
        formData.append('client_info', JSON.stringify(client.clientInfo)),
        formData.append('particular', 0),
        formData.append('reg_pwd', client.p_hash),
        formData.append('confirm_pwd', client.c_hash)
    });

    myDropzone.on('success', function(file, response) {
        myDropzone.removeFile(file);
        console.log( 'Error: ' + response );
    })

}

我很乐意接受另一个解释原始代码行为的答案，并有更好的方法（如果有的话）。

dropzone - var this not working (xhr formdata) inside another function's callback 第一次点击

dropzone - var this not working (xhr formdata) inside another function's callback the first click

javascript

jquery

xmlhttprequest

dropzone.js