divから入力テキストにデータをコピーするjqueryの問題

Question

フォームのインプレース編集に取り組んでいます。 私は2つのdivを持ち、そのうちの1つは表示要素を保持し、もう1つは入力フォームを保持します。

編集データをクリックすると、表示divから入力フォームに移動します。私はval（テキスト）を使用するときに変更が表示されますが、フォームをシリアル化してjson要素が古い場合は変更されます。

私はここで何が問題なのか理解しておく必要がありますか？ここで

はいくつかのコードです：ここ

function editForm2(){ 
    $("#editLink").click(function() { 
     if (this.text == 'Edit') { 
      console.log('editing'); 
      $("#display div.edit").each(function(i) { 
       var e = $("#input :input")[i]; 
       $(e).val($(this).text()); 
      }); 
      $("#display").hide(); 
      $("#input").show(); 
      $(this).text('Save'); 
     } 
     else if (this.text =='Save') { 
      // problem is here... When I serialize the form I got nothing ?! 
      console.log('saving'); 
      console.log($("#form1 :input")); // old values 

      var json_form = $('#form1').serializeObject(); 
      console.log(json_form); // old values? 
      $(this).text('Edit'); 

      $("#display").show(); 
      $("#input").hide(); 
     } 
    }); 

    console.log(this); 
} 

$(document).ready(function() { 
    editForm2(); 
});​ 

は、問題が放火犯によって未定義として報告された.serializeObject()たHTML

<div class="editSection" id="display" > 
    <div id="person_firstName" class="edit" width="200"> 
     Hello 
    </div> 
    <div id="person_lastName" class="edit"> 
     World 
    </div> 
</div> 

<div class="editSectionEdit" id="input" > 
    <form id="form1"> 
     <input name="person_firstName_in" type="text" class="edit" value="123" > 
     <input name="person_lastName_in" type="text" class="edit" value="456" > 
    </form> 
</div><br/> 

<div id="buttons"> 
    <a href="#" id="editLink">Edit</a> 
    <a href="#" id="cancelLink">Cancel</a> 
</div><br> 

<pre id="result"></pre> 

Answer 1

です。ここで

はあなたのソリューションが

var json_form = $('#form1').serialize(); 

Check here