0

其实会有两个问题，

场景是

该表单包含三个提交按钮，当我单击其中一个按钮时，会触发提交事件，然后是第一个事件，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 文档说

只有“成功的控件”被序列化为字符串。由于未使用按钮提交表单，因此未序列化提交按钮值

我无法使用获取按钮值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？

任何建议将不胜感激。

4

2 回答 2

0

要捕获按钮，请拨动

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

    }).on("submit",function(e){
        console.log("submit");
        return false;
    });​
于 2012-08-07T08:52:09.937 回答
0

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

$('#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
        });
    });
});
于 2012-08-07T10:15:51.657 回答