jquery - JQuery UI ダイアログ フォーム要素がフォームと共に送信されない

Question

送信中のフォーム内にダイアログ div があります。div には、JavaScript を使用してチェック ボックスが動的に入力されます。リンクをクリックしてダイアログを開き、いくつかのチェック ボックスを選択して閉じ、送信すると、選択したチェック ボックスが PHP プロセス ページで POST アイテムとして登録されません。

チェックボックスはページの読み込み後に動的に生成されるため、実際にはフォームの要素として登録されていないと思いますか? これは正しいです？この知識（または知識の欠如）を武器に、これを回避する方法がわかりません。

どんな助けでも大歓迎です。私は役に立たない助けを探しました。

HTML:

<form action="submit.php" method="POST">

        <div id="dialog" style="font-size:14px;">
            <div id="states_container">
                <div style="width:33%; float:left;" id="col1">

                </div>

                <div style="width:33%; float: left;" id="col2">

                </div>

                <div style="width:33%; float: left;" id="col3">

                </div>
            </div>

        </div>
   <input type="submit" value="Submit">
</form>

submit.js (はい、これがくだらないコードであることはわかっていますが、リファクタリングします):

$(function() {
    $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
        event.preventDefault();
    });

    $( "#dialog" ).dialog({
    autoOpen: false,
    width: 600,
    buttons: [
        {
            text: "Ok",
            click: function() {
                $( this ).dialog( "close" );
            }
        },
        {
            text: "Cancel",
            click: function() {
                $( this ).dialog( "close" );
            }
        }
    ]
    });

    var states1 = {
        AL: "Alabama", 
        AK: "Alaska", 
        AZ: "Arizona", 
        AR: "Arkansas", 
        CA: "California", 
        CO: "Colorado", 
        CT: "Connecticut", 
        DE: "Delaware", 
        DC: "District Of Columbia", 
        FL: "Florida", 
        GA: "Georgia", 
        HI: "Hawaii", 
        ID: "Idaho", 
        IL: "Illinois", 
        IN: "Indiana", 
        IA: "Iowa",
        KS: "Kansas"
    };

    var states2 = {

        KY: "Kentucky", 
        LA: "Louisiana", 
        ME: "Maine", 
        MD: "Maryland", 
        MA: "Massachusetts", 
        MI: "Michigan", 
        MN: "Minnesota", 
        MS: "Mississippi", 
        MO: "Missouri", 
        MT: "Montana",
        NE: "Nebraska",
        NV: "Nevada",
        NH: "New Hampshire",
        NJ: "New Jersey",
        NM: "New Mexico",
        NY: "New York",
        NC: "North Carolina"
    };

    var states3 = {
        ND: "North Dakota",
        OH: "Ohio", 
        OK: "Oklahoma", 
        OR: "Oregon", 
        PA: "Pennsylvania", 
        RI: "Rhode Island", 
        SC: "South Carolina", 
        SD: "South Dakota",
        TN: "Tennessee", 
        TX: "Texas", 
        UT: "Utah", 
        VT: "Vermont", 
        VA: "Virginia", 
        WA: "Washington", 
        WV: "West Virginia", 
        WI: "Wisconsin", 
        WY: "Wyoming"
    };



    $.each(states1, function(key, value) {
        $('#col1').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });


    $.each(states2, function(key, value) {
        $('#col2').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });


    $.each(states3, function(key, value) {
        $('#col3').append(
            '<label for="' + value + '"><input type="checkbox" name="'+value+'" id="'+value+'">'+value+'</label><br/>'
        );
    });
});