0

実際には2つの質問があります。

シナリオは

フォームには3つの送信ボタンが含まれています。これらのボタンの1つをクリックすると、送信イベントがトリガーされ、最初のイベントが発生しますが、clickこれをキャプチャしていません。2番目のイベントは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()

質問1は

送信を開始したボタン属性を取得するには?

私はこれの回避策として別の方法でアプローチしました。

  • 最初のクリック イベントのキャプチャ
  • 属性を取得する
  • 属性をイベントの追加パラメータとして渡します

変更されたコードは 

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

送信を 2 回トリガーしたため、type 属性を変更しました。

問題は、渡されたオブジェクトではなくconsole.log(e.data);プリントです。undefined

2番目の質問は

なぜ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 に答える