表单在jquery中序列化不能动态地使用

Question

我有附加图像的数据表，我想编辑表单并将编辑后的数据保存到mysql表中。可编辑的行可能是一个是两个。所以我得到特定的数据行值并更新该行本身。

脚本：

$('.edit_row').live('click',function(e){
        var baseurl = $("#baseurl").val(); 
        var id =  $(this).attr('id').replace('edit_row-','');
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: baseurl+'controlpanel/functions/edit_location/',
            data: {id:id},
            beforeSend: function(){
            },
            success: function(response){
                $('#area_row-'+id).html(response);
            }
        });
    });
$('.submit_location').live('click',function(e){
        var baseurl = $("#baseurl").val(); 
        var id =  $(this).attr('id').replace('submit_location-','');
        alert(id);
        //var formData = {user_country:country,user_state:state,city:city,status:status,area:area,pincode:pincode};
        var formData = $('#area_row-'+id).find('form').serialize();

        alert(formData);
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: baseurl+'controlpanel/functions/save_location/',
            data: formData,
            beforeSend: function(){
            },
           success: function(response){
                alert(response);
           }
        });
    });     

HTML：

<tr  id="area_row-1">
          <td class="centeralign"><input type="checkbox" value="1" name="ConId[]"/></td>
          <td>K.K.Nagar</td>
          <td>625010</td>
          <td>Afghanistan</td>
          <td>Tamilnadu</td>
          <td>Madurai</td>
          <td><a href="" class="deleterow">Active</a></td>
          <td class="centeralign"><a href="javascript:void(0);" class="edit_row" id="edit_row-1">Edit</a> | <a href="" class="deleterow">Delete</a></td>
        </tr>
                    <tr  id="area_row-28">
          <td class="centeralign"><input type="checkbox" value="28" name="ConId[]"/></td>
          <td>MA</td>
          <td>01453</td>
          <td>United States</td>
          <td>Ma</td>
          <td>Leominster </td>
          <td><a href="" class="deleterow">Active</a></td>
          <td class="centeralign"><a href="javascript:void(0);" class="edit_row" id="edit_row-28">Edit</a> | <a href="" class="deleterow">Delete</a></td>
        </tr>
                    <tr  id="area_row-29">
          <td class="centeralign"><input type="checkbox" value="29" name="ConId[]"/></td>
          <td>P & T Nagar</td>
          <td>625017</td>
          <td>India</td>
          <td>Tamil Nadu</td>
          <td>Madurai</td>
          <td><a href="" class="deleterow">Active</a></td>
          <td class="centeralign"><a href="javascript:void(0);" class="edit_row" id="edit_row-29">Edit</a> | <a href="" class="deleterow">Delete</a></td>
        </tr>