JavaScript的没有被调用的内联事件处理程序(JavaScript not being cal

这里是我的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>

我的HTML表单：

<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>

此代码当我打电话之前正在uploadForm()经由.click事件的<input type='submit'>元件，但是这将忽略<form>的必要属性检查在<input>元素。 所以，现在我想调用uploadForm()上的提交事件<form>但运行不正常。 reader.onload事件后应该得到所谓reader.readDataAsURL()结束，但事实并非如此。 我已经尝试过jQuery的.submit()无济于事。

编辑：终于抓住了错误与我的手机在录制。 Uncaught ReferenceError: uploadForm is not defined

Answer 1:

该uploadForm功能在全球范围内，因此它不能被发现。 只要定义功能之外 document.ready回调或使其全球通过将其分配到的属性window对象：

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

或者更好的办法，因为你正在使用jQuery，是事件处理程序使用jQuery绑定，而不是使用内联事件处理程序：

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

Answer 2:

的onsubmit应设置为uploadForm（）（也就是你要计算的表达式），你要执行的函数的不只是名字。

Answer 3:

我想你可以尝试在你的代码的一些变化。

你uploadForm()函数必须只

reader.readAsDataURL(document.getElementById('file').files[0]);

其他所有的东西都可以在document.ready() ;

这样，读者对象将做好准备，当你调用该函数readAsDataURL将触发onLoad事件。

试试这个。

Answer 4:

函数“uploadForm”是看不见的由DOM，因为函数“uploadForm”在另一个函数被定义。 在你的代码，另一个功能是指： $(document).ready(function(){...})

在jQuery中，你可以像这样绑定事件：

HTML：

<form id="myFormID">
    ....
</form>

JS：

<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()
        {
            //....
        };

        // ↓↓↓↓↓Bind events here↓↓↓↓↓
        $("#myFormID").submit(uploadForm);
    });
</script>

文章来源: JavaScript not being called in inline event handler