javascript - JQueryを使用して動的JQueryUIダイアログで動的に作成されたフォーム要素の値を設定する

Question

サービスからデータを読み取り（JSONオブジェクトを返す）、動的なJQuery UIダイアログで編集可能なフォームを作成して、エンドユーザーがそれを使用して変更を加えて送信できるようにしようとしています。問題は、サーバーからデータを取得するときに、フォームにデータを設定できないように見えることです。ダイアログを使用しない場合は、すべてが機能します。

役立つ場合に備えて、関連するJSFiddleを作成しました。

var dialog_box = $('<div></div>');
var animal = { kind : "Cat", has_whiskers : true };
var s = $('<select />', {
    "id":"s1"
}).append(
    $('<option />', 
        {
            value:"Dog", 
            text:"Dog"
        }
    ),
    $('<option />', 
        {
            value:"Cat", 
            text:"Cat"
        }
    ),
    $('<option />', 
        {
            value:"Bird", 
            text:"Bird"
        }
    )
);
s.appendTo(dialog_box);

// doesn't work
$('#s1 option:[value="'+ animal.kind +'"]').prop('selected', true);

var new_div = $('<div/>').html('<input type="checkbox" id="has_whiskers_checkbox" />');

new_div.appendTo(dialog_box);

(animal.has_whiskers) ? $("#has_whiskers_checkbox").prop("checked", true) : $("#has_whiskers_checkbox").prop("checked", false);

dialog_box.dialog({
     autoOpen: false,
     modal: true,
     buttons: {
         "OK": function() {
              console.log("OK Pressed");
              $( this ).dialog( "close" );
              $( this ).remove();
           }
        }
}).dialog('open');

Answer 1

$('#s1 option:[value="'+ animal.kind +'"]', dialog_box).prop('selected', true);

例