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

其实有两个问题,

场景是

表单包含三个提交按钮，当我单击其中一个按钮时，将触发提交事件，然后第一个事件是

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
        });
    });
});

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

问题是

console.log（e.data）

打印

未定义的

，而不是传递的对象

第二个问题是

为什么

e.data

未定义

如果您有任何建议，我们将不胜感激。

要捕获该按钮

---

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

$('#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
        });
    });
});

$（'search main a'）。在（'click'，函数（e）上{
e、 预防默认值（）；
$（“#搜索高级”）.remove（）；
var target=$（this.attr（'href'）；
var res=$.get（目标，函数（数据）{
$（'body'）。追加（$（数据）。查找（'search advanced'）；
$（“#搜索高级”）.addClass（“行显示模式”）；
$（“#搜索高级”）
.css（'top'，80）
.css（'border-radius'，'5px'）
.css（'padding-left'，'0px'）
.css（'padding-right'，'0px'）；
var clickedButtonName；
变量clickedButtonVal；
$（“#搜索高级输入[name=“select_filter”]”）。删除（）；
$（'search advanced'）。在（'change'，'categorhydropdown'，函数（）上{
$（'search advanced form'）。触发器（'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=$（“#搜索高级形式”）.serialize（）；
如果（属性的类型！==“未定义”）{
var key=Object.keys（attr）；
参数+='&'
+键[0]
+ '='
+属性[key[0]]；
}
如果（点击按钮名称的类型！='undefined'&&typeof点击按钮名称！='undefined'）{
参数+='&'
+单击按钮名称
+ '='
+单击按钮瓦尔；
}
$.get（目标、参数、函数（数据）{
$（'search advanced form'）.html（$（data.find（'search advanced form'）.html（））；
$（“#搜索高级输入[name=“select_filter”]”）。删除（）；
});
返回false；
});
$（“#搜索高级”）.append（“×；”）；
$（“#搜索高级”）。显示({
动画：“淡入淡出”，
closeOnBackgroundClick:false
});
});
});

您可以尝试获取单击以提交表单的按钮。我自己从来没有使用过它，但我认为它应该可以工作。@AnthonyGrist没有，它也未定义，但它不允许您访问在

submit

事件处理程序中单击的按钮。是的，我只是尝试回答您的一个问题“第一个事件是单击，但我没有捕获它”。我认为您不能在submit事件中按事件对象获取按钮，因为它是由表单触发的。或者您可以执行类似于

console.log（$（this.find）（“按钮：悬停”））的操作以获取按钮。但我认为这不是一个好主意……事实上，我不知道这种事件的连锁反应，@Willy，你救了我一天。这个答案帮助我解决了很多问题，并重新考虑了这些问题。我也找到了第二种方法的解决方案。我会发布工作答案，同时接受这个。谢谢。
    $("#frm").on("click","button",function(){
       alert(this.id);

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

$('#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
        });
    });
});