JQueryを使用してダイナミックに作成されたフォーム要素の値を設定する

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); 

Example