dropzone - varこれは、別の関数のコールバック内の最初のクリックでは機能しません（xhr formdata）

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です：

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要求なし）。

「送信」をクリックすると（xhr要求を送信します）、サーバー応答（myDropzone.on('success'）が表示されます。

なぜ初めて動作しますか？私は間違って何をしていますか？これをどのように修正できますか？

Answer 1

私はなぜコードがそのように振る舞っているのか、曖昧な考えがありますが、適切に説明するために必要な知識（理論）が不足しています。

とにかく、私は思っていますが、それを行う適切な方法を見つけました、私はそれが良いテクニックの基準になることを願っています。

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); 
    }) 

} 

私は喜んで説明する別の答えを受け入れるだろう：私は今、フォームデータにアクセスすることができます.on('sending')（つまりプラグインのコールバックの外でなければなりません）というように、初期化ドロップゾーンでのスコープのオブジェクトを移入するための関数を使用しています元のコードの動作と（もしあれば）より良いアプローチを持っています。