jquery - jQuery を使用してフォーム送信をトリガーするにはどうすればよいですか?

Question

次のフォームを検討してください。

HTML:

<form action="my_file.php" method="post" enctype="multipart/form-data" id="uploadFile" target="hiddenIframe">
    <input type="file" name="files" id="files">
    <input id="fileUploadButton" type="submit" name="upload" value="Upload File">
    <iframe name="hiddenIframe" id="hiddenIFrame"></iframe>
</form>
<div id="myButton" onclick="submitFile()">Submit</div>
<input type="hidden" id="fileID" value="">

次の jQuery スクリプトを使用すると、ファイルをアップロードできます。

<script> 
    $(document).ready(function() { 
        $('#fileUploadButton').click(function(){
            $('#uploadFile').submit();
        });
    }); 
</script>

スクリプトが実行された後、新しくアップロードされたファイルの (データベースからの) ID が非表示の入力フィールドに挿入され、id="fileID"すべて正常に動作します。ただし、私がやりたいのは、をクリックして上記のフォーム送信をトリガーすることです<div id="myButton">

function submitFile() {
    $(document).ready(function() {
        if ($('input[name=files]').val() != "")
        {
            $('#uploadFile').submit(function(){
                $.ajax({
                    type: "POST",
                    url: 'my_file.php',
                    success: function(data){
                        $('#fileID').val(data);
                    }
                });
            });
        }
    });
}

上記のスクリプトを機能させることができません。ファイルアップロードフォームは送信されません。これを機能させる方法について何か提案はありますか?

更新:ボタンから 削除onclick="submitFile()"してこれを試しましたが、機能しません。なんで？

<script>
    $(document).ready(function() { 
        $(document).on('click','#myButton',function(){
            $('#uploadFile').submit(function(){
                    $.ajax({
                        type: "POST",
                        url: 'my_file2.php',
                        success: function(data){
                            $('#fileID').val(data);
                        }
                    });
                });
            });
        });
</script>

更新 2: ファイル送信ボタン ( id="fileUploadButton") をクリックすると、フォームが iframe で送信されます。しかし、更新したスクリプト (上記の UPDATE:... から) を使用して、ボタン ( id="myButton") をクリックしてフォームを送信しようとすると、機能しません。