jquery - ajax をロードしたフォームからの送信

Question

やあ

ajax でロードされたフォームを送信するためのアイデアを誰かに持っています: www.example.com/form.php は

<form>
    <fieldset>
        <legend>Your name?</legend>
        <input type="name" id="name" />
        <button type="submit">OK!</button>
    </fieldset>
</form>

www.example.com/index.php は

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Myform</title>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <div id="formDiv"></div>
        <button id="open">Open</button>
        <button id="close">Close</button>
        <script type="text/javascript">
            (function($) {
                $(document).ready(function() {
                    $('#open').click(function() {
                        $('#formDiv').load('www.example.com/form.php');
                    });
                    $('#close').click(function() {
                        $('#formDiv').empty();
                    });
                    $('#formDiv form').submit(function() {
                        alert("Hello, "+($('#formDiv form #name').val())+"!");
                        return false;
                    });
                });
            })(jQuery);
        </script>
    </body>
</html>

送信の代わりに「こんにちは、私の名前」を警告したい。

ありがとうございました

score 5 · Accepted Answer

イベント委任を使用して、動的にロードされるフォームのイベントハンドラーを設定します。

$('#formDiv').on('submit', 'form', function(event) {
    alert("Hello, "+($('#name').val())+"!");
    return false;
});

score 3 · Accepted Answer

フォーム送信イベントは、実行時にフォームがロードされない可能性があるため機能しません。代わりに、以下のようにロードイベントのコールバックでイベントを作成する必要があります。

$('#formDiv').load('www.example.com/form.php',{},function() {
    $('#formDiv form').submit(function(event) {
        event.preventDefault();
        alert("Hello, "+($('#formDiv form #name').val())+"!");
    });
});

この場合もfalseを返します。event.preventDefault（）を使用する必要がありますが機能しません

score 2 · Accepted Answer

jQuery.onを使用してイベント委任を使用する必要があります

$('#formDiv').on('submit', 'form', function() {
    alert("Hello, "+($('#formDiv form #name').val())+"!");
    return false;
});

score 0 · Accepted Answer

試す

 $('#formDiv form').live('submit',function() {
           alert("Hello, "+($('#formDiv form #name').val())+"!");
           return false;
    });

jquery - ajax をロードしたフォームからの送信

4 に答える 4

Related

Reference