JavaScript不会在内联事件处理程序中调用 [英] JavaScript not being called in inline event handler

问题描述

这是我的JavaScript：

 < script> 
 //确保DOM在准备好之前准备就绪。 
 $（document）.ready（function（）
 {
 console.log（'DOM is ready！'）; 
 var socket = io.connect（'http：/ / localhost：8080'）; 
 //每个文档字段都有以下标识符：
 // classCode，description，professor，file 
 function uploadForm（）
 {
 console.log（'创建FileReader对象...'）; 
 var reader = new FileReader（）; 
 reader.onload = function（evt）
 {
 console .log（'Read complete。'）; 
 console.log（'Creating JSON object ...'）
 var documentData = 
 {$ b $'classCode'：$（' val（），
'description'：$（'＃description'）。val（），$（$＃'教授'）。 b $ b'档案'：
 {
 'data'：evt.target.result，
'metadata'：document.getElementById（'file'）。files [0] 
}，
'dateUploaded'：new Date（）， 
'rating'：0 
}; 
 console.log（documentData）; 
 console.log（'Adding document。'）; 
 socket.emit（'addDocument'，documentData）; 
}; 
 console.log（'以二进制字符串读取...'）; 
 reader.readAsDataURL（document.getElementById（'file'）。files [0]）; 
}; 
}）; 
< / script> 
  

我的HTML表单：

 < form onsubmit ='uploadForm（）'> 
< input type ='text'placeholder ='Class code'id ='classCode'required /> 
< input type ='text'placeholder ='文档描述'id ='description'required /> 
< input type ='text'placeholder ='Professor'id ='professor'required /> 
< input type ='file'id ='file'required /> 
< input type ='submit'value ='Upload！'/> 
< / form> 
  

此代码在我调用 uploadForm（）< input type ='submit'> 元素上通过 .click 事件添加了c $ c>，但是这会忽略< input> 元素中的< form> 的必需属性检查。所以现在我试图在< form> 的submit事件上调用 uploadForm（），但它是没有正常运行。 reader.onload 事件应该在 reader.readDataAsURL（）完成后调用，但事实并非如此。我已经试过jQuery的 .submit（）无济于事。

编辑：最后用我的手机录下了错误录音。 Uncaught ReferenceError：uploadForm未定义

解决方案 uploadForm 函数不在全局范围内，因此无法找到。只需定义 document.ready 回调之外的外部函数或通过将其分配给窗口的属性使其成为全局函数 object：

  window.uploadForm = function（）{
 // ... 
}; 
  

或者更好的方法，因为您使用的是jQuery，所以将事件处理函数与jQuery绑定，而不是使用内联事件处理函数：

  $（'＃yourFormID'）。（'submit'，function（）{
 // ... 
}）; 
  

Here is my JavaScript:

<script>
    //Make sure DOM is ready before mucking around.
    $(document).ready(function()
    {
        console.log('DOM is ready!');
        var socket = io.connect('http://localhost:8080');
        //Each document field will have the following identifiers:
        //classCode, description, professor, file
        function uploadForm()
        {
            console.log('Creating FileReader object...');
            var reader = new FileReader();
            reader.onload = function(evt)
            {
                console.log('Read complete.');
                console.log('Creating JSON object...')
                var documentData = 
                {
                    'classCode':$('#classCode').val(),
                    'professor':$('#professor').val(),
                    'description':$('#description').val(),
                    'file': 
                        {
                            'data': evt.target.result,
                            'metadata': document.getElementById('file').files[0]
                        },
                    'dateUploaded':new Date(),
                    'rating':0 
                };
                console.log(documentData);
                console.log('Adding document.');
                socket.emit('addDocument', documentData);
            };
            console.log('Reading as binary string...');
            reader.readAsDataURL(document.getElementById('file').files[0]);
        };
    });
</script>

My HTML form:

<form onsubmit = 'uploadForm()'>
        <input type = 'text' placeholder = 'Class code' id = 'classCode' required/>
        <input type = 'text' placeholder = 'Document description' id = 'description' required/>
        <input type = 'text' placeholder = 'Professor' id = 'professor' required/>
        <input type = 'file' id = 'file' required/>
        <input type = 'submit' value = 'Upload!'/>
    </form>

This code was working before when I was calling uploadForm() via a .click event on the <input type='submit'> element, but that would ignore <form>'s required attribute check on the <input> elements. So now I am trying to call uploadForm() on the submit event of the <form>, but it is not running properly. reader.onload event should get called after reader.readDataAsURL() finishes, but this is not the case. I already tried jQuery's .submit() to no avail.

EDIT: Finally caught the error recording with my phone it. Uncaught ReferenceError: uploadForm is not defined

解决方案

The uploadForm function is not in global scope, hence it cannot be found. Just define the function outside of the document.ready callback or make it global by assigning it to a property of the window object:

window.uploadForm = function() {
    // ...
};

Or a better way, since you are using jQuery, is to bind the event handler with jQuery instead of using inline event handlers:

$('#yourFormID').on('submit', function() {
    // ...
});

这篇关于JavaScript不会在内联事件处理程序中调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！