Question

实际上会有两个问题，

该方案

表单包含三个提交按钮，当我点击其中一个按钮时，提交事件被触发，然后第一个事件是click，但我没有捕获这个。第二个事件是表格submit，这是我正在捕捉的那个。

代码是

$('#search-main a').on('click', function(e){
    e.preventDefault();
    $('#search-advanced').remove();
    var target = $(this).attr('href');
    var res = $.get(target, function(data){
        $('body').append($(data).find('#search-advanced'));
        $('#search-advanced').addClass('row reveal-modal');
        $('#search-advanced')
        .css('top', 80)
        .css('border-radius' , '5px')
        .css('padding-left' , '0px')
        .css('padding-right' , '0px');

        $('#search-advanced').on('submit', 'form' ,function(e){
            var params = $('#search-advanced form').serialize();

            console.log(e);
            console.log(params);
            $.get(target, params, function(data){
                $('#search-advanced form').html($(data).find('#search-advanced form').html());
                $('#search-advanced input[name="select_filter"]').remove();
            });
            return false;
        });

        $('#search-advanced input[name="select_filter"]').remove();
        $('#search-advanced').on('change', '#categoryDropdown', function(){
            $('#search-advanced form').trigger('submit');
        });

        $('#search-advanced').append('<a class="close-reveal-modal">&#215;</a>');
        $('#search-advanced').reveal({
            animation: 'fade', 
            closeOnBackgroundClick: false
        });
    });
});

自JQuery文档说

仅将“成功控件”序列化为字符串。没有提交由于表单未使用a提交，因此按钮值已序列化按钮

我无法使用serialize()

获取按钮值

问题是

如何获取启动提交的按钮属性？

我以不同的方式接近了解决方法，这是

首先捕获点击事件
获取属性
将属性作为事件额外参数传递

修改后的代码是

$('#search-advanced').on('submit', 'form' ,function(e){
    var params = $('#search-advanced form').serialize();

    console.log(e.data);
    console.log(params);
    $.get(target, params, function(data){
        $('#search-advanced form').html($(data).find('#search-advanced form').html());
        $('#search-advanced input[name="select_filter"]').remove();

        if(typeof $('input[name="one_more"]') !== 'undefined'){
            var oldOneButton = $('input[name="one_more"]');
            var newOneButton = oldOneButton.clone();
            newOneButton.attr('type', 'button');
            newOneButton.insertBefore(oldOneButton);
            oldOneButton.remove();
        }

        if(typeof $('input[name="remove_filter"]').attr('name') !== 'undefined'){
            var oldRemoveButton = $('input[name="remove_filter"]');
            var newRemoveButton = oldRemoveButton.clone();
            newRemoveButton.attr('type', 'button');
            newRemoveButton.insertBefore(oldRemoveButton);
            oldRemoveButton.remove();
        }
    });
    return false;
});

$('#search-advanced input[name="select_filter"]').remove();
$('#search-advanced').on('change', '#categoryDropdown', function(){
    $('#search-advanced form').trigger('submit');
});

$('#search-advanced').on('click', 'input[name="one_more"]', function(){
    console.log($(this).attr('name'));
    var name = $(this).attr('name');
    var value = $(this).attr('value');
    $('#search-advanced form').trigger('submit', {name:value});
});

我更改了type属性，因为它触发了两次提交。

问题是console.log(e.data);打印undefined而不是传递的对象。

第二个问题是

为什么e.data是undefined？

任何建议都将不胜感激。

Answer 1

捕捉按钮fiddle

    $("#frm").on("click","button",function(){
       alert(this.id);

    }).on("submit",function(e){
        console.log("submit");
        return false;
    });

Answer 2

工作解决方案包含两个问题的答案

$('#search-main a').on('click', function(e){
    e.preventDefault();
    $('#search-advanced').remove();
    var target = $(this).attr('href');
    var res = $.get(target, function(data){
        $('body').append($(data).find('#search-advanced'));
        $('#search-advanced').addClass('row reveal-modal');
        $('#search-advanced')
        .css('top', 80)
        .css('border-radius' , '5px')
        .css('padding-left' , '0px')
        .css('padding-right' , '0px');

        var clickedButtonName;
        var clickedButtonVal;
        $('#search-advanced input[name="select_filter"]').remove();
        $('#search-advanced').on('change','#categoryDropdown', function(){
            $('#search-advanced form').trigger('submit', {'select_filter':'Select Filter'});
        }).on('click', 'input.button', function(){
            clickedButtonName = $(this).attr('name');
            clickedButtonVal = $(this).attr('value');
        }).on('submit', 'form' ,function(e, attr){
            var params = $('#search-advanced form').serialize();

            if(typeof attr !== 'undefined'){
                var key = Object.keys(attr);
                params += '&'
                + key[0]
                + '='
                + attr[key[0]];
            }

            if(typeof clickedButtonName !== 'undefined' && typeof clickedButtonVal !== 'undefined'){
                params += '&'
                + clickedButtonName
                + '='
                + clickedButtonVal;
            }
            $.get(target, params, function(data){
                $('#search-advanced form').html($(data).find('#search-advanced form').html());
                $('#search-advanced input[name="select_filter"]').remove();
            });
            return false;
        });

        $('#search-advanced').append('<a class="close-reveal-modal">&#215;</a>');
        $('#search-advanced').reveal({
            animation: 'fade', 
            closeOnBackgroundClick: false
        });
    });
});

如何在一系列事件中获取启动事件的元素？

2 个答案: