preventDefault 后无法提交答案

【问题标题】：Can't submit after preventDefaultpreventDefault 后无法提交
【发布时间】：2012-05-23 16:06:52
【问题描述】：

我使用一个用于表单验证的脚本 (validationEngine) 和一个用于文件上传的脚本 (uploadify)。

为了最好地管理我的表单提交：

validationEngine 检测是否可以发送我的表单。
如果我可以提交，我会上传我的文件
一旦我上传了所有文件 (onQueueCompleteuploadify)，我就提交了我的表单。

如果我在我的 onQueueComplete 中创建一个alert('foo');，它就可以工作。但是如果我提交我的selector.submit() ... 什么都不会发生。

$(function() {
    $('#file_upload').uploadify({
        'fileSizeLimit' : '2048KB',
        'auto': false,
        'swf'      : '<?php echo site_url('public/modules/uploadify/uploadify.swf')?>',
        'uploader' : '<?php echo site_url('public/modules/uploadify/uploadify.php')?>',
        'buttonText' : 'Ajouter...',
        'method' : 'post',
        'formData' : {'userMail' : '<?php echo $userMail ?>'},
        'onQueueComplete' : function(queueData) {
            $('#validator').submit();
        } 
    });
});

$(document).ready(function() {
    $("#validator").validationEngine();
    $('#validator').submit(function(event){
        event.preventDefault();
        var canSubmit = $("#validator").validationEngine('validate');
        if(canSubmit)
        {
            $('#file_upload').uploadify('upload','*');
        }
    });
});

使用此代码，一切正常，但提交不起作用。就好像事件不存在一样。

【问题讨论】：

或者选择器错误，元素不存在！

标签： jquery validation submit uploadify preventdefault

【解决方案1】：

两件事：

(1) 你在别处的选择器是#validator，而你在非功能调用中使用validator。

(2) 您正在preventDefaulting 每个源自 #validator 的 submit 事件，因此即使正确触发了该事件，它也不会执行提交操作。您需要调用原生 DOM 元素的 submit 操作：

$('#validator')[0].submit();

[0] 从选择中获取本机 DOM 元素，然后调用本机 submit 函数。这意味着没有运行 jQuery 处理程序，因此您进行的 event.preventDefault 调用也不会运行，因此事件将起作用。

【讨论】：

这只是 (1) 的糟糕副本/过去。对不起^^。我测试了你的 (2) 并且事件没有启动。我做了一个新的例程

【解决方案2】：

不应该是：

$('#validator').submit();

【讨论】：

【解决方案3】：

这种方法使自己的任务复杂化。我决定更轻松地完成一个新的例程。

我让文件自动加载。我刚刚创建了我删除的元素。

无论如何，要发送我的邮件，文件附件将被销毁。

这是我的新代码，它可以工作。

/**
 * uploadify
 * 
 * we add a onUploadStart event to manage the file. uploadify uploads directly our files, but maybe the user missclick
 * and wants to remove some file.
 * 
 * The send action (controller webmail) doesn't upload files, uploadify do that for us.
 * We just need in the post for the name of the file registered in a hidden input.
 */
$(function() {
    $('#file_upload').uploadify({
        'fileSizeLimit' : '2048KB',
        'swf'      : '<?php echo site_url('public/modules/uploadify/uploadify.swf')?>',
        'uploader' : '<?php echo site_url('public/modules/uploadify/uploadify.php')?>',
        'buttonText' : 'Ajouter...',
        'method' : 'post',
        'formData' : {'userMail' : '<?php echo $userMail ?>'},
        'onUploadStart' : function(file){
            $('#uploadList').append('<div class="file"><a href="#" class="deleteFile" rel="'+file.name+'">'+file.name+' - [x]</a><input type="hidden" name="files[]" value="'+file.name+'" /></div>');
        }

    });

    /**
     * the .deleteFile elements are added after domready. We have to attach event click.
     * We remove the parent block to remove a file of mail attachment
     */
    $('#uploadList').on('click','.deleteFile',function(){
        var rel = $(this).prop('rel');
        /*$('input[value="'+rel+'"]').remove();*/
        $(this).parents('div:first').remove();
    });
});

$(document).ready(function() {
    $("#message").cleditor()[0].focus();

    $("#validator").validationEngine();     
});

【讨论】：