4

私はjQueryフォームプラグインを使用して、同じページ上の2つのフォームの送信イベントをバインドし、ページ上の別々のdivにマークアップを返す別々のPHPスクリプトに送信されるようにしています。

1つのフォームが次のフォームを更新します。私は「ライブ」を使用しているので、各フォームは更新されたときにイベントがリバウンドされます。

$(document).ready(function() {
    /* Form 1 */
    $('#frmSearch').live('submit', function() {
        $(this).ajaxSubmit({
            target: '#divResults',
            url:    'search_div.php'
        });
        return false;
    });
    /* Form 2 */
    $('#frmResults').live('submit', function() {
        $(this).ajaxSubmit({
            target: '#divLookup',
            url:    'lookup_div.php',
        });
        return false;
    });
});

ここまでは順調ですね。各フォームはajaxを使用して何度も送信でき、すべてのバインディングは1つの送信から次の送信まで存続します。

この問題は、3番目のフォームをバインドし、2番目のフォームの「成功」オプションでその送信イベントを発生させようとすると発生します。

/* Form 2 */
$('#frmResults').live('submit', function() {
    $(this).ajaxSubmit({
        target: '#divLookup',
        url:    'lookup_div.php',
        success: function(responseText){
            $('#frmLookup').submit();
        }
    });
    return false;
});
/* Form 3 */
$('#frmLookup').live('submit', function() {
    $(this).ajaxSubmit({
        target: '#divMappings',
        url:    'mapped_items_div.php',
    });
    return false;
});

これを行うと、ajaxSubmitは正常に実行されますが、フォームのデフォルトの送信も実行され、ページがリロードされます。「returnfalse」が含まれていることに注意してください。フォームのデフォルトの送信を抑制しますが、何らかの理由でとにかく送信します。

フォーム3の「ライブ」と同じオプションを使用してフォーム2の成功関数でフォーム3の「送信」イベントに「バインド」すると、フォームのデフォルトの送信は実行されないことがわかりました。ただし、これは冗長であり、可能であれば、それを避けたいと思います。

フォーム3のデフォルトの送信動作を抑制するにはどうすればよいですか？

4

3 に答える 3

3

問題に関連しているかどうかはわかりませんが、「 」イベントlive()はサポートされていませんsubmit:

現在サポートされていません:blur, focus, mouseenter, mouseleave, change, submit

于 2009-03-22T01:01:22.043 に答える
0

私を正しい軌道に乗せてくれてありがとう、クレセントフレッシュ。私の解決策として、フォーム自体とその内容ではなく、フォーム内にネストされた要素のみを出力するようにスクリプトを修正しました。次に、次のフォームを含む div ではなく、各フォームの「ターゲット」を次のフォームに変更しました。前のフォームの ajax 関数は、全体を「更新」するのではなく、その内部要素を単に置き換えるだけなので、これにより各フォームの送信イベントを再バインドする必要がなくなります。

また、フォーム プラグインを廃止し、単に「.serialize()」を「.ajax」とともに使用することが適切であると判断しました。

私の最終製品は次のようになります。

/* Form 1 */
$('#frmSearch').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'result_form.php',
        data:   formdata,
        success: function(responseText){
            $('#frmResults').html(responseText);
        }
    });
    return false;
});

/* Form 2 */
$('#frmResults').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'lookup_div.php',
        data:   formdata,
        success: function(responseText){
            $('#frmLookup').html(responseText);
            $('#frmLookup').trigger('submit');
        }
    });
    return false;
});

/* Form 3 */
$('#frmLookup').bind('submit', function() {
    var formdata = $(this).serialize();
    $.ajax({
        url:    'mapped_items_div.php',
        data:   formdata,
        success: function(responseText){
            $('#divMappings').html(responseText);
        }
    });
    return false;
});
于 2009-03-24T06:38:16.587 に答える
0

私はそれが同じであることを知っていますが、これは本当に奇妙な動作に思えるので、置き換えてみます

$('#frmLookup').submit();

為に

$('#frmLookup').trigger('submit');

それが何かを変えるかどうかを確認するには？

于 2009-03-22T00:47:50.330 に答える