1

因此，我尝试为包含文件输入的表单和不包含文件输入的表单设置单独的提交侦听器。当我在添加侦听器之前尝试过滤我想要的元素时，它似乎选择了整个 html 正文。这可以实现吗？或者我是否已将两个侦听器都设置为所有表单并在提交后进行过滤？

http://jsfiddle.net/bi11j0hnst0n/MMzg7/3/

$(function(){
    //file form listener
    var file_forms = $('input[type=file]').closest('form');
    $('body').on('submit', file_forms, function(event){
        event.preventDefault();
        var form = $(this);
        form.css('background-color', 'blue');
        setTimeout(function(){
            form.css('background-color', 'white');
        }, 3000);
    });
    //regular form listener
    var regular_forms = $('form').not($('input[type=file]').closest('form'));
    $('body').on('submit', regular_forms, function(event){
        event.preventDefault();
        var form = $(this);
        form.css('background-color', 'red');
        setTimeout(function(){
            form.css('background-color', 'white');
        }, 3000);
    });
});
4

2 回答 2

0

如果您的表单不是动态注入到页面中，那么您不需要使用事件委托，如果您的表单是动态注入到页面中，那么这不是您使用事件委托的方式。（您可能想阅读.on()）

假设您的表单在您的页面中是静态的，那么您可以分配不同的表单，具体取决于它们是否包含input[type=file]使用：

var allForms = $('form'),
    uploadForms = allForms.has('input[type=file]');

uploadForms.on('submit', function(e) { ... });  // for forms with file uploads

allForms.not(uploadForms).on('submit', function(e) { ... });  // all other forms

http://jsfiddle.net/MMzg7/6/

如果您确实需要使用事件委托，那么您可以使用：

// with uploads
$('body').on('submit', 'form:has(input[type=file])', function(e){ ... });

// all other forms
$('body').on('submit', 'form:not(:has(input[type=file]))', function(e){ ... });

http://jsfiddle.net/MMzg7/7/

尽管我建议您将这些附加到最近的静态父级，该父级将包含您的动态注入表单，而不仅仅是body元素。

于 2013-10-16T22:57:21.083 回答
0

我能想到的最简单的方法是选择所有表单，然后过滤该选择以创建hasForms和noForms（或您喜欢的任何名称），然后将submit-handler（with on()）附加到那些 jQuery 集合，而不是到body元素：

$(function () {

    var forms = $('form'),
        hasFiles = forms.filter(function () {
            return $(this).find('input[type="file"]').length;
        }),
        noFiles = forms.filter(function () {
            return $(this).find('input[type="file"]').length === 0;
        });

    //file form listener
    var file_forms = $('input[type=file]').closest('form');
    hasFiles.on('submit', function (event) {
        event.preventDefault();
        var form = $(this);
        form.css('background-color', 'blue');
        setTimeout(function () {
            form.css('background-color', 'white');
        }, 3000);
    });
    //regular form listener
    var regular_forms = $('form').not($('input[type=file]').closest('form'));
    noFiles.on('submit', function (event) {
        event.preventDefault();
        var form = $(this);
        form.css('background-color', 'red');
        setTimeout(function () {
            form.css('background-color', 'white');
        }, 3000);
    });
});

JS 小提琴演示。

于 2013-10-16T22:59:11.240 回答